深入解析CSS样式层叠权重值
前言：折腾了半天圆角，发觉border-radius是css3的新特性，简单粗暴的解决了button的圆角显示，中间由于css权重问题，导致即使我设置了圆角也一直没有生效。以下是找到的相当不错的一篇css样式权重讲解的，清晰明了，看完就懂是啥了。
永记在心： important > 内联 > ID > 类|属性|伪类 > 标签|伪元素 > 通配符 > 继承 （相对于原文的调整 属性选择和为对象均与类并列~）
简单记住这几个就够用了： important > 内联 > ID > 类|属性|伪类 > 标签|伪元素
important > style="" >#first > .myClass | [type=‘button‘] | :hover > input | ::after
正文~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
深入解析CSS样式层叠权重值
读到《重新认识CSS的权重》这篇，鬼哥在文章最后给出了便于记忆的顺序：“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”。那么这个顺序是怎么得出来的呢？实际上在CSS2规范关于具体性(specificity)的定义中，描述是非常明确的，但是很多中文版本的 CSS 图书中采用了 10 进制的简单相加计算方式（包括第一版《CSS 权威指南》，第二版中已经纠正）。因此把规范中对CSS层叠优先级的相关定义意译一下，希望给初入门或对权重计算尚有疑惑的朋友提供一些参考。
根据 CSS 规范，具体性越明确的样式规则，权重值越高。计算权重值的依据，并不是许多文章所描述的那样“class是10，标签是1，ID是100”之类——虽然这样在大多数情况下能够得到正确的结果。
选择器权重值的计算
- 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：计算该选择器中伪类及其它属性的数量（包括类选择器、属性选择器等，不包括伪元素）。 **（例如， .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=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 */ |
根据这样的定义，所以很多文章简单地把规则归纳为：内联样式的权重值是1000，ID选择器的权重值是100，class选择器的权重值是10，标签选择器的权重值是1. 整条规则中的所有选择器权重值相加得到整个样式规则的权重值，数字越大权重值越高。
大多数情况下，按照这样的理解得出的结论没有问题，但是遇到下面这样的情况就出现问题了：
/* 样式一 */body header div nav ul li div p a span em {color: red}/* 样式二 */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;}/* 样式二 */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.
关于 inherit
除了直接指定到元素上的样式规则以外，每个属性值还有一个可能为 inherit(继承) 的值。表示元素的该样式属性继承自父级元素，与父级元素的定义一致。比如：
<style> .list .item { color: red } </style><ul class="list"> <li class="item"> <span>某些文字</span> </li></ul> |
上例中，样式规则并未针对 span 标签指定 color 属性， 但是 span 中的文字会显示为红色， 这就是因为 span 的 color 属性默认值为 inherit.
对于 inherit 的属性，只要记住一点： 继承而来的属性值，权重永远低于明确指定到元素的定义。只有当一个元素的某个属性没有被直接指定时，才会继承父级元素的值。例如：
<style> span { color: blue } .list .item { color: red } </style><ul class="list"> <li class="item"> <span>某些文字</span> </li></ul> |
同样的例子， 第一条规则的权重是 0,0,0,1, 第二条规则的权重是 0,0,2,0. 虽然第二条规则的权重更高，但是它是针对 li 元素的直接指定，并不是针对 span 元素定义的，所以计算 span 的 color 属性权重值时，实际上就是 inherit 的红色与直接指定的蓝色的对比。按照规则，只要有直接指定的值（蓝色），就不会再取继承的值（红色），所以 span 中的文字显示为蓝色。
这条规则最典型的场景就是链接文字的颜色。由于一般浏览器自带的样式表都有针对a 标签的颜色及下划线的直接指定，所以网页样式表中对 a 标签的父级元素指定color 属性及 text-decoration 属性，通常不会起作用。但是我们可以通过下面的reset 来改变这一点：
<style>a { color: inherit; text-decoration: inherit }.item { color:red }</style><p class="item"><a href="#">链接文字</a></p> |
在上例中，由于我们的样式表对 a 标签直接指定了 color 和 text-decoration 属性值， 覆盖了浏览器的默认样式，所以在没有特别指定 a 标签的颜色和下划线定义的前提下， 会从父级元素 p 继承，因此链接会显示为红色（有补充）。
特别补充：
inherit在 CSS1 规范中并未定义，所以 IE6, IE7 以及 IE8 的 QuirksMode 不支持。
总结
- 一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];
- A 表示内联样式，只有 1 或者 0 两个值；
- B 表示规则中 ID 的数量；
- C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量；
- D 表示规则中标签和伪元素的数量；
- 比较时从高位到低位（从 A 到 D）分别比较，高位相同才需要比较低位；
- 有
!important标记的属性权重值无视没用!important指定的一切情况； - 多次指定
!important时，相互抵销。 inherit而来的属性定义，优先级低于任何直接指定的属性值。
来源：http://www.ofcss.com/2011/05/26/css-cascade-specificity.html 感谢作者分享
可参考： http://www.w3cplus.com/css/css-specificity-things-you-should-know.html 感谢分享
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
