CSS选择器优先级

今天在写京东顶部的时候，发现了对选择器的优先级从感知上的认识是错误的。因此写这篇来简单用客观的理论来比较选择器的优先级。
先让我们看看让我发生对选择去感知上错误的栗子：

开始我认为.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）。经过比较我们可以发现后者的优先级的确是高于前者。
　　有了具体的比较方法，我们再也不用去用感知去判断选择器的优先级了。

最后感谢————十个流年的博客