根据 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>
最佳答案
请参阅 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 或类,那么您的类选择器将始终胜出。
关于html - 为什么特异性公式不适用于十个封闭标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40088469/