Iar*_*nov 3 html css w3c css-selectors
根据规范,第二规则具有更多的特异性,文本必须是蓝色,但它是红色的.
/** specificity = 10 */
.my{
background-color: red;
}
/** specificity = 12 */
html body div b i strong em span font strike ul li{
background-color: blue;
}Run Code Online (Sandbox Code Playgroud)
<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>Run Code Online (Sandbox Code Playgroud)
从CSS技巧中查看这些规则:
对于每个类值(或伪类或属性选择器),应用0,0,1,0个点
对于每个元素引用,应用0,0,0,1点
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或类,那么您的类选择器将始终获胜.