CSS 特殊性详解

以前学CSS一直没有深刻的去研究CSS选择器的优先级，此次好好的看了下以后写的时候特殊性值仿佛都浮如今眼前，如今写的时候内心更加清晰，这里梳理一下学到的东西。

特殊性(specificity)

咱们能够用不少种写法来定位一个元素，而选择器的特殊性值则是决定哪个胜出的关键。选择器的特殊性值其实很简单，就是 0,0,0,1/0,1,0,1/0,0,0,5/... 的形式。

主要有四个规则:

1. 用了ID +0,1,0,0

2. 用class、属性(如[id="btn1"])、伪类(如:hover) +0,0,1,0

3. 元素和伪元素(如::before) 加0,0,0,1

4. 结合符对特殊性没有贡献,而通配符的贡献是0,0,0,0.(因此他们对总特殊性没有影响)

那么最前面的0呢?其实这个是留给内联样式的的~因此内联样式的特殊性最高,是1,0,0,0.

接下来咱们再看几个例子相信能更好地理解:

p{font-style: normal} /* 0,0,0,1 */
body div p{font-style:italic} /* 0,0,0,3 */(winner)

html > body table tr[id="totals"] td ul > li{color:maroon;} /* 0,0,1,7 */
li#answer {color: navy} /* 0,1,0,1 /* (winner)

咱们注意到第二组尽管第一个的特殊性值的最后一part已经达到了7，可是仍是输给了0,1,0,1.特殊性值并非简单的进制相加和比较,而是从左向右排序的,,只要前面比你大,无论后面你是7仍是77,都比你特殊性高。如1,0,0,0大于0,10,0,0.

这是从网上找到的一张图~颇有意思.

最后一点则是重要声明:

p.dark{color: #333 !important;}

重要声明并无贡献特殊性值,可是重要声明老是会覆盖非重要声明,因此咱们能够把重要声明和非重要生命分为两组，非重要声明使用特殊性值来解决冲突，重要声明的冲突会在重要声明内部解决.

继承

继承很简单,后代元素样式会继承父元素的样式.
可是显然边框，盒子模型的外边距、内边距等等都是不能继承的。
继承的值不贡献特殊性,咱们要注意这和0,0,0,0特殊性是有区别的.
0,0,0,0特殊性会优先于无特殊性.

*{color: gray}
h1{color: black}

<h1>css <em>specificity</em></h1>

em中的字体颜色会是灰色的,由于0特殊性比继承值优先级高.

层叠

CSS其实不就叫层叠样式表嘛(cascading style sheet),因此层叠是CSS最核心的概念,而层叠其实就是结合咱们前面所说的特殊性和继承作到的.
CSS的层叠规则以下:

1. 找出全部相关的规则,这些规则都包含与一个给定元素匹配的选择器。

2. 按显式权重对应用到该元素的全部声明排序2）按照显式权重对应用到该元素的全部声明排序。标志！important的规则的权重要高于没有！important标志的规则。按照来源对应用到给定元素的全部声明排序。共有3种来源，创做人员，读者和用户代理。正常状况下，创做人员 > 读者模式 > 用户代理的默认样式。

3. 按照特殊性对应用到给定元素的全部声明排序。有较高特殊性的元素权重要大于有较低的特殊性的元素。

4. 按照出现的顺序应用到给定元素的全部声明排序。一个声明在样式表或文档中越后出现，它的权重就越大。若是样式表中右导入的样式表，通常认为出如今导入样式表中的声明在前，主样式表中的全部声明在后。

css权威指南balabala了这一大段,仍是简单点来描述吧.

首先咱们肯定来源
读者的重要声明>创做人员的重要声明>创做人员的正常声明>读者的正常声明>用户代理声明.
(读者的声明就是用户自定义的样式,好比在设置中改变字体大小.)

而后再按特殊性排序,特殊性值高的优先级高.

若是特殊性值仍是同样,那么后定义的规则优先.

总结

在实际开发过程当中,咱们可能只须要知道内联样式>id>class便可,若是特殊性相同,后定义的规则优先.

参考书籍: 《CSS: The Definitive Guide》