许多人发现CSS很复杂。 他们提出了各种借口：缺乏理解CSS的能力或CSS本身就是不好的。 但是现实是人们根本没有时间真正学习它。 如果您正在阅读本文，那么您有兴趣学习CSS，它很棒！
什么是CSS特异性？
您是否曾经写过样式，但是它不起作用，然后添加
！重要 （或不起作用），但是它不起作用？ 然后您看一下Devtools，意识到在您的某个地方有另一种样式重叠吗？
这就是CSS的特殊性！ 这是浏览器如何选择要应用于元素的竞争选择器的方式。 当浏览器看到两个或多个选择器与同一个元素匹配，并且选择器具有冲突的规则时，它需要一种方法来找出要应用于该元素的规则。 这种情况的发生方式称为“ CSS特异性值”。
在深入研究CSS特异性之前，请记住以下几点：- 仅当多个选择器影响同一元素时，CSS特殊性才重要。 浏览器需要一种方法来确定存在冲突的属性值时应将哪种样式应用于相应的元素。
- 当两个或多个匹配选择器具有相同的特异性值（权重）时，浏览器将选择“最新”匹配选择器，该选择器显示在更靠近匹配选择器列表底部的位置。 下一段说明什么是“合适的选择器列表”。
- 浏览器通过组合网页上的所有样式并过滤出与“当前样式”元素不匹配的样式，来创建“合适的选择器列表” 。 样式表中的第一个选择器在列表的顶部，最后一个选择器在底部。
- 元素的样式属性具有比样式表中的选择器更大的特异性值，除非样式表选择器中有！重要 。
- 使用！Important （在某些情况下被认为是不正确的做法）会更改选择器的特异性。 当两个选择器具有相同的特异性时，带有！重要的选择器将获胜。 当它们都具有！Important时 ，“最近”选择器将获胜。
特异性值
现在我们可以继续浏览器如何确定选择器的特异性。
选择器的特异性可以表示为由连字符（或其他字符）分隔的三位数字符串：“ 2-4-1”。 第一个数字是存在的ID选择器的数量，第二个数字是类选择器，属性和伪类选择器的数量，第三个是可用的类型和伪元素选择器的数量。 例如：
#red.blue // 1-1-0 #green // 1-0-0 div.yellow#red // 1-1-1 .red.blue.yellow // 0-3-0
最“特定”的定义
要确定哪个选择器更具体，可以比较这三个值中的每一个。
假设您具有
1-1-1和
0-3-0 ，如最后两个示例中所示，您需要确定哪一个具有最高的特异性。 首先，您比较最后的值
1和
0 ，在这种情况下
1获胜。 这意味着目前
div.yellow#red具有更高的特异性值...但我们尚未完成对这些值的比较。
接下来，比较值
1和
3 ，获胜
3次。 目前.red.blue.yellow具有更高的特异性值。
最后，我们比较第一个值
1和
0 ，以及
1获胜，因此
div.yellow#red比
.red.blue.yellow更具特异性。
选择器的CSS特殊性很好地解释了为什么没有许多类选择器可以覆盖ID选择器。
小警告
要注意的3个“陷阱”：- 我在上面写过，由三个组成的数字序列中的第二个数字是“类选择器，属性选择器和伪类的数量”。 在所有情况下都是如此，除非它是
:not()伪类。 当它是:not()伪类时，我们不考虑它，而只是忽略它。 但是里面的选择器不会被忽略，它们被认为是正常的。 - CSS特定性理解选择器的“形状”。 这意味着当您具有
*[id="yellow"]和#yellow ，第一个将被视为属性选择器。 - 仅通用选择器
*并不会计入选择器的特殊性。 在上面的[id="yellow"]段中，选择器的一部分才是真正重要的。
我希望本文易于理解，有助于理解CSS的特殊性。 现在，您可以查看样式并轻松确定其“特定性”。