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分
如果有具有相同特定性的选择器，则页面上最后定义的规则将覆盖其他规则
通用选择器*和遗传风格没有得到特异性点

此外，此网站可能对您有用。它进一步解释了这一点。

在为自己测试了这些规则之后，我发现这并不完全正确。特异性的应用顺序仍然正确，但通过这个测试，它并不像我所知道的大多数网站所声称的那样真正适用于这个积分系统。似乎更准确的是把样式放在"盒子"里。它仍然会使用我上面列出的"框"的顺序，而是计算每个"框"，如果该组中有相同数量的选择器，请检查下一个。然后它会这样工作：

• !important样式在框1中。这些样式将替代所有其他样式。如果有多个相同样式的声明都具有!important规则，那么将查看下一个最高框中的样式
• 内联样式在框2中。内联样式将覆盖所有其他样式。如果存在多个内联样式声明，则最后定义的声明将适用
• ID选择器在框3中。如果有多个相同样式的声明，并且具有相同数量的ID选择器，那么将查看下一个最高的框
• (pseudo-)类和属性选择器在框4中。我想你已经明白了，当有多个相同风格的选择器数量相等时会发生什么
• 标签选择器在框5中
• 通用选择器在方框6中。不过，这个框的行为有点不同，因为添加更多的通用选择器并不会增加特异性，正如这里可以看到的那样，所以只有定义的顺序适用于这个框。使用通用选择器应用的样式会覆盖继承的样式
• 如果没有将样式直接指定给元素，则可能会应用继承的样式，具体取决于它是什么样式

因此，基本上，如果我们在样式表顶部有一个带有1个id选择器的样式，而在该样式下方有一个具有10个以上类选择器的样式时，带有id选择器的风格仍然适用。框3中带有id选择器的样式"赢得了战斗"，因此其他框将被忽略。Fabrício Matté连接的特异性计算器非常好地说明了这一点。

PS：使用+或>或~或任何其他算子都不会影响特异性。这些风格具有完全相同的特异性(因此后者将适用)：

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