html - 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 ，因此在此框中仅适用定义顺序。不过，使用通用选择器应用的样式确实会覆盖继承的样式。
• 如果没有直接为元素分配样式，则可能会应用继承的样式，具体取决于它是什么样式。

所以基本上，如果我们的样式表顶部有一个带有 1 个 id 选择器的样式，而在该样式下方有一个超过 10 个类选择器的样式，则带有 id 选择器的样式仍然适用。带有 id 选择器的样式在方框 3 中“赢得了战斗”，因此其他方框将被忽略。 specificity calculator Fabrício Matté 与插图的关联非常好。

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

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