为什么特异性公式不适用于十个封闭标签？

Question

根据the specification，第二条规则更具体，文本必须是蓝色，但它是红色的。

/** specificity =  10 */
.my{
     background-color: red;
}

/** specificity =  12 */
html body div b i strong em span font strike ul li{
      background-color: blue;
}

<html>
<body>
<div>
<b><i><strong><em><span><font><strike><ul><li class="my">SUPER</li></ul></strike></font></span></em></strong></i></b>
</div>
</body>
</html>

Answer 1

如果第二条规则具有相同的层次结构选择器，则第二条规则具有更高的特异性仅。如果您有 class（更具体），它将接管。

您可以使用 li.my:

/** specificity =  10 */
.my{
     background-color: red;
}

/** specificity =  12 */
html body div b i strong em span font strike ul li.my {
      background-color: blue;
}

<html>
<body>
<div>
<b><i><strong><em><span><font><strike><ul><li class="my">SUPER</li></ul></strike></font></span></em></strong></i></b>
</div>
</body>
</html>

Answer 2

从 CSS 技巧中查看这些规则：

For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points

For each element reference, apply 0,0,0,1 point

https://css-tricks.com/specifics-on-css-specificity/

因此您的第一个示例有 0,0,1,0 分。而你的第二个有 0,0,0,12 分。

0,0,1,0 > 0,0,0,12

基本上，无论您在选择器中引用了多少元素，如果您没有 ID 或 class 被引用，那么您的 class 选择器将始终赢.

CSS Tricks

为什么特异性公式不适用于十个封闭标签？

Why doesn't specificity formula work for ten enclosed tags?

html

css

css-selectors

w3c