CSS 选择器渲染优先级

 

一般情况下，CSS的优先顺序如下，这个大家应该都知道：

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承。

 

根据这个规律，可以先做下一下的题目：

 

 

#p1{color:red}
.p1{color:green} 
p{color:blue}

 

<p id="p1" class="p1">TEST TEST TEST</p>

 

应该不难判断，文字的颜色是红色的，因为优先级最高。稍作修改

 

.d1 #p1{color:red}
#d1 .p1{color:green} 

 

<div class="d1" id="d1">
<p id="p1" class="p1">asdfasdfasdfasd</p>
</div>

 

 

此时文字变成了绿色，是不是可以说#d1 .p1的优先级比高呢，其实还不能。换一下两组css的顺序，再看。发现颜色变红了，其实两组选择器的优先级是一样的，这种情况，写在后面的css会覆盖掉前面的定义，所以由于Css顺序的不同，呈现了不同颜色。

 

再回头看第一个例子，将三个样式调换顺序，如下：

 

 

.p1{color:green} 
p{color:blue}
#p1{color:red}

 

发现第一个例子的文本颜色，还是红色，所以说优先级大的选择器，无论放在前后，都不会被优先级小的覆盖掉。

 

那么优先级到底怎么判断呢，如果说一个CSS组合很复杂，是不是有办法计算一个值，来衡量它的优先级呢？

 

比如：

 

.d1 .d2 #d3 .d4 .d5 .d6 .p1{color:green}
.d1 #d2 .d3 .d4 #d5 p{color:red}

 

如果没有计算方法，在不跑浏览器的情况下，很难确定谁的优先级比较高。当然这种多级的CSS写法很不推荐，存在效率问题。

 

W3C官方的确有推荐的优先级计算方法，也叫CSS权值计算方法。W3C把权值用一组数来衡量:（a,b,c,d）。

 

a：代表行内样式，它没有选择器，固定为1
b：代表选择器组合中，ID选择器的个数
c：代表选择器组合中，类选择器、属性选择器或伪类选择器的个数
d：元素或者伪元素选择器的个数

 一些简单的例子：

 

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

 

通过这个计算方法，计算下例子中的选择器组合的权值：

第一组：0，1，6，0

第二组：0，2，3，1

 

虽然拿到了数据，但还是不知道怎么比较，231>160么。大多数情况下，可以这么判断，但是如果是（0，1，60，0）跟（0，2，3，1）呢，这时候就没法用1600 > 231 去判断。

前面说个，权值是一组数，不是一个数，所以(0，1，6，0) != 160。

判断的逻辑应该这样：

 

从左往右，如果同位上，值大的整个组合的权值就大，如果相同，再进行下一位比较。如果位数不够，在左边补0处理。数位之间没有进制，不会满10向前一位进1。

 

再看例子中，第二组中第二位2大于第一组中第二位的1，所以第二组的权值大于第一组。

 

那important的权值怎么算呢，W3C中算然没说，但一般情况下important的权值看成1,0,0,0,0。

 

有些人需要用一个数代表一个权值的办法来计算，比如

 

1. 内联样式： 1000
2. ID 选择器： 100
3. Class 类选择器： 10
4. 标签选择器： 1

 

这种算法很容易让人误以为是10进制数学运算，所以当同一个选择器有10个以上时，就不能用这种方法计算。比如ID选择器有11个，那他的权值是1100，但其实还是内联样式的优先级高，虽然内联样式的权值只有1000.