CSS中的选择器优先级权重比较

 a{
 color: red;
 }
 #box a{
 color: green;
 }
 [class="box"] a{
 color: gold;
 }
 .box a{
 color: purple;
 }
 p a{
 color: yellow;
 }
 
 
 hello

请问上面代码中，a标签中文字的最终颜色是什么？知道CSS选择器优先级规则的童鞋都知道，在CSS中优先级顺序如下：

ID选择器 > class选择器 > tag选择器

所以，上面代码的颜色，大家都会选择 #box a{ color: green;} 绿色。这个答案没错。 假如我们把这一条规则从style标签中移除呢，那么a标签文字的颜色应该是哪个？

答案是： purple。

a{color:red} 和 p a {color : yellow;}的优先级一定没有其它两项高，不需要考虑。在 [class=”box”] a和.box a中，后者的顺序比较考后，会覆盖之前的样式，所以颜色是purple。

这也许会是少量人的答案，不能不说不对。那么假如这中情况下呢？

 
 #box{
 color: green;
 }
 
 
 hello 

不用说，大家都知道会使用style=”color: red;”属性定义的颜色，是red。

那么，css所遵从的具体规则是什么呢？

权重计算规则

• 第零等：!important， 大过了其它任何设置。
• 第一等：代表内联样式，如: style=””，权值为1000。
• 第二等：代表ID选择器，如：#content，权值为0100。
• 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
• 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
• 第五等：通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
• 第六等：继承的样式没有权值。

计算规则

!important 和内联样式style都属于不讲理的那种，

只需存在 !important，!important便具备最高优先级；

假如不存在 !important，存在style，那么style便具备最高优先级；