今天在写京东顶部的时候，发现了对选择器的优先级从感知上的认识是错误的。因此写这篇来简单用客观的理论来比较选择器的优先级。
先让我们看看让我发生对选择去感知上错误的栗子：
<ul class="fr">
<li class="spacer" ></li>
</il>
开始我认为.spacer{}优先级是高于 .fr li{}，但事实证明结果与我所预料的截然相反。接下来我们将看看CSS的选择器到底是如何计算优先级的。
解决优先级要引入一个特指度的概念（specificity），特指度表示一个css选择器表达式的重要程度。
CSS样式选择器分为4个等级，a、b、c、d，可以以这四种等级为依据确定CSS选择器的优先级。
1.如果样式是行内样式（通过Style=””定义），那么a=1
2.b为ID选择器的总数
3.c为Class（属性选择器、伪类选择器）类选择器的数量。
4.d为类型选择器（伪元素选择器）的数量
５.!important 权重最高，不在之内计算
例如：
| 选择器 | 特制度(a,b,c,d) |
|---|---|
| Style= ”” | 1,0,0,0 |
| #wrapper #content {} centered | 0,2,0,0 |
| #content .datePosted {} | 0,1,1,0 |
| div#content {} | 0,1,0,1 |
| #content p {} | 0,1,0,1 |
| p.comment .dateposted {} | 0,2,1,0 |
有了这样的特指度我们就能进行优先级的比较：
selector( a , b , c , d )
compare: ↑ , ↑ , ↑ , ↑
selector( a , b , c , d )
正如w3c.org中原文所示，分为a,b,c,d四组，全为正整娄，默认为0，对应于不同的选择器结构和组成形式。在选择器之间的优先级进行对比时，从左到右1对1对比，当比出有大者时即可停止比较。
我们再回到我发生的问题的代码，.spacer{}特指度为（0,0,1,0）而.fr li{}特指度为（0,0,1,1）。经过比较我们可以发现后者的优先级的确是高于前者。
有了具体的比较方法，我们再也不用去用感知去判断选择器的优先级了。
最后感谢————十个流年的博客
网友评论