关于css优先级的问题我想也困扰过很多人，特别是我今天发这篇文章里面所说这种情况，本文内容是截取自KB005：CSS层叠文章中的关于计算选择器的特殊性( Selector’s specificity )部分，下面直接进入主题吧！
选择器的特殊性是在相同来源，相同重要性的规则之间判定最终哪个规则会起作用。 比如， 同是开发者自己定义的样式，并且，没有使用 “!important” 规则，这样的样式才可以计算特殊性。
根据层叠顺序，优先级相同的样式，如何判断哪一条声明会起作用，取决于对其选择器特殊性的计算值。
例如，都是作者样式，并且没有使用 ‘!important’ 规则：
<!DOCTYPE HTML>
<style type="text/css">
div {
width: 100px;
height: 100px;
}
#c1 #c2 div.con {
background-color: yellow;
}
div {
background-color: black;
}
#c2 div {
background-color: blue;
}
#c2 #content {
background-color: red;
}
</style>
<div id="c1">
<div id="c2">
<div id="content" class="con"></div>
</div>
</div>
如上代码中，多个样式中的 ‘background-color‘ 同时作用于 content，那么最后，到底 content 应该会是什么颜色呢？
这就应该求助于选择器特殊性的计算规则了。
特殊性的值可以看作是一个由四个数组成的一个组合，用 a，b，c，d 来表示它的四个位置。 依次比较 a，b，c，d 这个四个数比较其特殊性的大小。比如，a 值相同，那么 b 值大的组合特殊性会较大，以此类推。 注意，W3C 中并不是把它作为一个 4 位数来看待的。
a，b，c，d 值的确定规则：
如果 HTML 标签的 ‘style’ 属性中该样式存在，则记 a 为 1；
数一下选择器中 ID 选择器的个数作为 b 的值。比如，以上样式中包含 ‘#c1’ 和 ‘#c2’ 的选择器；
其他属性以及伪类（pseudo-classes）的总数量是 c 的值。比如，上面例子中的 ‘.con’，’:hover’ 等；
元素名和伪元素的数量是 d 的值；比如上面例子中的 ‘div’。
现在，应用上面的规则，计算例子中各个样式的特殊性的值，结果为：
<!DOCTYPE HTML>
<style type="text/css">
div {
width: 100px;
height: 100px;
}
#c1 #c2 div.con { /* a=0 b=2 c=1 d=1 -> specificity = 0,2,1,1 */
background-color: yellow;
}
div { /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
background-color: black;
}
#c2 div { /* a=0 b=1 c=0 d=1 -> specificity = 0,1,0,1 */
background-color: blue;
}
#c2 #content { /* a=0 b=2 c=0 d=0 -> specificity = 0,2,0,0 */
background-color: red;
}
</style>
<div id="c1">
<div id="c2">
<div id="content" class="con"></div>
</div>
</div>
可见，’#c1 #c2 div.con” 的特殊性( [0,2,1,1] )最高，是背景色应该是黄色。
转载请注明：Rockyxia Web技术博客 » CSS优先级之计算选择器的特殊性( Selector’s specificity )
感谢阅读，如果您发现文章中有表述不准确，欢迎提出来，也欢迎交流相关问题，你可以去这里进行一对一问答交流。