CSS 规则特异性

Question

如何计算 CSS 中的规则特异性？我知道基本的东西（样式 1000，id 100，att/class 10 等）但是，我仍然被简单的东西卡住了太多次，例如：

这个要多少钱？

<div class="wrapper">
    <div class="inner"></div>
</div>
.wrapper > div /* ??? */
.inner /* 10 */

显然，第一条规则适用。但是多少钱呢？

Answer 1

基本上是这样的：

• !important 样式始终覆盖所有其他样式，但在 !important 样式中，确实适用特定规则
• 内联样式获得 1000 个“特异性”点
• ID 获得 100 分
• （伪）类和属性选择器获得 10 分
• 标签选择器得 1 分
• 如果存在具有相同特异性的选择器，则页面上最后定义的规则将覆盖其他规则。
• 通用选择器* 和继承的样式没有特异性点。

另外，this site 可能对您有用。它进一步解释了它。

在testing these rules for myself 之后，我注意到这并不完全正确。应用特异性的顺序仍然适用，但是通过这个测试，它实际上并不像我知道的大多数网站声称的那样与这个积分系统一起工作。似乎更准确的是将样式放入“盒子”中。它仍然会使用我上面列出的“框”的顺序，而是计算每个“框”，如果该组中有相同数量的选择器，请检查下一个。然后它会像这样工作：

• !important 样式在框 1 中。这些样式覆盖所有其他样式。如果有多个相同样式的声明都具有!important 规则，则将查看下一个最高框中的样式。
• 内嵌样式在框 2 中。内嵌样式将覆盖所有其他样式。如果有多个内联样式声明，将应用最后定义的一个。
• ID 选择器在框 3 中。如果有多个相同样式的声明，具有相同数量的 ID 选择器，将查看下一个最高框。
• （伪）类和属性选择器在方框 4 中。我想您应该明白当有多个相同样式且具有相同数量的此选择器时会发生什么...
• 标签选择器在方框 5 中。...
• 通用选择器在框 6 中。不过，此框的行为有点不同，因为添加更多通用选择器不会增加特异性，正如 here 所见，因此此框仅适用定义顺序。使用通用选择器 do 应用的样式会覆盖继承的样式。
• 如果没有将样式直接分配给元素，则可能会应用继承的样式，具体取决于它的样式。

所以基本上，如果我们的样式表顶部有一个带有 1 个 id 选择器的样式，而在其下方有一个超过 10 个类选择器的样式，那么带有 id 选择器的样式仍然适用。带有 id 选择器的样式在框 3 中“赢得了战斗”，因此忽略其他框。链接到的specificity calculatorFabrício Matté 说明得非常好。

PS：使用+ 或> 或~ 或任何其他运算符根本不会影响特异性。这些样式具有完全相同的特异性（因此后者将适用）：

div > span {color:red;}
div span {color:blue;}