CSS规则特异性

Question

如何计算CSS中的规则特异性？我知道基本的东西（1000代表风格，100代表id，10代表att / class等）然而，我仍然被简单的事情困住了太多次，例如：

这会是多少？

<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 calculatorFabrícioMatté与之相关联的说明非常好。

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

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