深入学习CSS特殊性！特别是CSS选择器的优先级！-原创手记-慕课网

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

特殊性(specificity)

我们可以用很多种写法来定位一个元素，而选择器的特殊性值则是决定哪一个胜出的关键。
选择器的特殊性值其实很简单，就是0,0,0,1/0,1,0,1/0,0,0,5/....的形式。
主要有四个规则:

用了ID +0,1,0,0
用class、属性(如[id="btn1"])、伪类(如:hover) +0,0,1,0
元素和伪元素(如::before) 加0,0,0,1
结合符对特殊性没有贡献,而通配符的贡献是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的层叠规则如下:

找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。
按显式权重对应用到该元素的所有声明排序2）按照显式权重对应用到该元素的所有声明排序。标志！important的规则的权重要高于没有！important标志的规则。按照来源对应用到给定元素的所有声明排序。共有3种来源，创作人员，读者和用户代理。正常情况下，创作人员 > 读者模式 > 用户代理的默认样式。
3 按照特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低的特殊性的元素。
按照出现的顺序应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现，它的权重就越大。如果样式表中右导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后。

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

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

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

如果特殊性值还是一样,那么后定义的规则优先.

总结

在实际开发过程中,我们可能只需要知道内联样式>id>class即可,如果特殊性相同,后定义的规则优先.

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