深入解析CSS样式层叠权重值-CSDN博客

读到《重新认识CSS的权重》这篇，鬼哥在文章最后给出了便于记忆的顺序：

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

那么这个顺序是怎么得出来的呢？实际上在CSS2规范关于具体性(specificity)的定义中，描述是非常明确的，但是很多中文版本的css图书中采用了10进制的简单相加计算方式（包括第一版《CSS权威指南》，第二版中已经纠正）。因此把规范中对CSS层叠优先级的相关定义意译一下，希望给初入门或对权重计算尚有疑惑的朋友提供一些参考。

选择器权重值的计算

A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0.

对于内联样式，由于没有选择器，所以B、C、D的值都为0，即A=1, B=0, C=0, D=0（简写为1,0,0,0，下同）。

B：计算该选择器中ID的数量。

例如，#header 这样的选择器，计算为0, 1, 0, 0。

C：计算该选择器中伪类及其它属性的数量（包括class、属性选择器等，不包括伪元素）。

例如， .logo[id='site-logo'] 这样的选择器，计算为0, 0, 2, 0。

D：计算该选择器中伪元素及标签的数量。

例如，p:first-letter 这样的选择器，计算为0, 0, 0, 2。

CSS2规范中给出的一些例子：

*{...} /* 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=0 d=0 -> specificity = 0,0,0,0 */

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=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

根据这样的定义，所以很多文章简单地把规则归纳为：内联样式的权重值是1000，ID选择器的权重值是100，class选择器的权重值是10，标签选择器的权重值是1. 整条规则中的所有选择器权重值相加得到整个样式规则的权重值，数字越大权重值越高。

大多数情况下，按照这样的理解得出的结论没有问题，但是遇到下面这样的情况就出现问题了：

样式一： body header div nav ul li div p a span em {color: red}

<br /> 样式二： **.count {color: blue}**

按照错误的计算方法，样式一的权重值是11，样式二的权重值是10，如果这两条规则用于同一个元素，则该元素应该是红色。实际结果却是蓝色。

权重值的比较

按照四组计算的正确方法，上面例子中的样式一权重值应该是0, 0, 0, 11，样式二的权重值是0, 0, 1, 0。

根据规范，计算权重值时，A,B,C,D四组值，从左到右，分组比较，如果A相同，比较B，如果B相同，比较C，如果C相同，比较D，如果D相同，后定义的优先。

样式二和样式一的A、B相同，而样式二的C大于样式一，所以，不管D的值如何，样式二权重值都大于样式一。这就是正确的答案。

特殊的 !important

在按照ABCD四组计算比较之外，在定义样式的时候，还可以对某一个属性应用 !important。对于一直从事编程而没做过重构的人，需要特别注意的是这里的“!”与其在编程语言中的意义刚好相反，不是代表“不重要”而是代表“很重要”。

CSS2规范中规定：!important 用于单独指定某条样式中的单个属性。对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。

例如：

样式一： #header nav ul li.current {color: red; font-weight: bold;}

<br /> 样式二： **li:hover {color: blue !important; font-weight: normal;}**

就整条规则而言，样式一的权重值为 0, 1, 1, 3，而样式二的权重值仅为0, 0, 0, 2。所以应用于相同元素时，应该样式一生效。但是对于color这个属性，由于在样式二中用 !important 做了指定，因此color将应用样式二的规则。而font-weight则按照规定用样式一的规则。

如果多条规则中都对同一个属性指定了 !important 呢？这时候 !important 的作用相互抵销，依然按照ABCD四组计算比较。

因此 !important 的作用只有在具有唯一性时才能提现，但是我们永远无法预料自己什么时候又需要覆盖一个已经指定了 !important 的属性，所以最好的办法就是：不要使用 !important。

总结

一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];
A表示内联样式，只有1或者0两个值；
B表示规则中ID的数量；
C表示规则中除了ID、标签和伪元素以外的其它选择器数量；
D表示规则中标签和伪元素的数量；
比较时从高位到低位（从A到D）分别比较，高位相同才需要比较低位；
有 !important 标记的属性权重值无视没用 !important 指定的一切情况；
多次指定 !important 时，相互抵销。

转自小李刀刀 -- 原文地址

转载于:https://my.oschina.net/tonyz/blog/150231