CSS中选择器优先级的权重计算

先看一段代码，如下：

 ???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。

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

 ???#box{ ?????color: green; ???} ?</style> ?<p id='box' class="box" style="color: red;"> hello </p>

不用说，大家都知道会使用style="color: red;"属性定义的颜色，是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 */UL OL LI.red ???/* a=0 b=1 c=3 -> specificity = 0-0-1-3 */LI.red.level ???/* a=0 b=2 c=1 -> specificity = 0-0-2-1 */#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 */

• 继承的样式没有权值，比其它任何类型的权值都低。

【参考资料】

CSS selector specificity

CSS中选择器优先级的权重计算

原文地址：https://www.cnblogs.com/lalalagq/p/9943484.html