CSS中选择器优先级的权重计算
CSS中选择器优先级的权重计算
先看⼀段代码，如下：
``` <style> a{ color: red; } #box a{ color: green; } [class="box"] a{ color: gold; } .box a{ color: brown; } p a{ color: yellow; } </style> <p id='box' class="box"> <a>hello</a></p> ```
请问上⾯代码中，a标签中⽂字的最终颜⾊是什么？知道CSS选择器优先级规则的童鞋都知道，在CSS中优先级顺序如下：
ID选择器 > class选择器 > tag选择器
所以，上⾯代码的颜⾊，⼤家都会选择#box a{ color: green;}绿⾊。这个答案没错。如果我们把这⼀条规则从style标签中移除呢，那么a标签⽂字的颜⾊应该是哪个？brown? or gold? Which one?
答案是： brown。
a{color:red}和p a {color : yellow;}的优先级肯定没有其它两项⾼，不需要考虑。在[class="box"] a和.box a中，后者的顺序⽐较考后，会覆盖之前的样式，所以颜⾊是brown。
这也许会是⼀些⼈的答案，不能不说不对。那么如果这中情况下呢？
``` <style> #box{ color: green; } </style> <p id='box' class="box" > hello </p> ```
不⽤说，⼤家都知道会使⽤属性定义的颜⾊，是red。
那么，css所遵从的具体规则是什么呢？
权重计算规则
1. 第零等：!important，⼤过了其它任何设置。
2. 第⼀等：代表内联样式，如: style=””，权值为1000。
3. 第⼆等：代表ID选择器，如：#content，权值为0100。
4. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
5. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
6. 第五等：通配符、⼦选择器、相邻选择器等的。如*、>、+，权值为0000。
7. 第六等：继承的样式没有权值。
计算规则
!important和内联样式style都属于不讲理的那种，
只要存在!important，!important便具有最⾼优先级；
如果不存在!important，存在style，那么style便具有最⾼优先级；
剩下的 “ID” 、 “类，伪类和属性” 、 “元素类型和伪元素“ 分别对应权重值（0-a-b-c）中的 a/b/c；计算⽅法如下：
*              /* a=0 b=0 c=0 -> specificity = 0-0-0-0 */
LI              /* a=0 b=0 c=1 -> specificity = 0-0-0-1 */
UL LI          /* a=0 b=0 c=2 -> specificity = 0-0-0-2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity = 0-0-0-3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity = 0-0-1-1 */css 属性选择器
UL d    /* a=0 b=1 c=3 -> specificity = 0-0-1-3 */
#x34y          /* a=1 b=0 c=0 -> specificity = 0-1-0-0 */
#s12:not(FOO)  /* a=1 b=0 c=1 -> specificity = 0-1-0-1 */
继承的样式没有权值，⽐其它任何类型的权值都低。
【参考资料】

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。