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

标签 html css css-selectors w3c

根据 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 或类,那么您的类选择器将始终胜出

enter image description here

CSS Tricks

关于html - 为什么特异性公式不适用于十个封闭标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40088469/

相关文章:

css - 缩放图像保持纵横比,然后在流体高度和宽度 DIV 内垂直和水平居中

html - 是否可以让黄色背景只包围 "This is Main website"字?

html - 我似乎无法弄清楚如何在每个设备上将此 div 居中

javascript - 将 "data-hover"添加到 Wordpress 菜单项

javascript - 如何通过单击另一张图像来更改带有过渡的 img src

html - 使 HTML 列保持相同大小

html - 如何使文本列保持在右侧 保持在右侧

internet-explorer - IE9 @font-face 遇到未知错误

testing - 如何在 testcafe 上使用 id 获取元素

python - 如何从 Twitter 页面探索中提取主题标签?