研究特异性我偶然发现了这个博客 - http://www.htmldog.com/guides/cssadvanced/specificity/
它指出特异性是 CSS 的评分系统。它告诉我们元素值 1 分,类值 10 分,ID 值 100 分。最重要的是说这些点是总计的,总数是选择者的特殊性。
例如:
body = 1 point
body .wrapper = 11 points
body .wrapper #container = 111 points
因此,使用这些点,我希望以下 CSS 和 HTML 导致文本为蓝色:
#a {
color: red;
}
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
color: blue;
}
<div class="a">
<div class="b">
<div class="c">
<div class="d">
<div class="e">
<div class="f">
<div class="g">
<div class="h">
<div class="i">
<div class="j">
<div class="k">
<div class="l">
<div class="m">
<div class="n">
<div class="o" id="a">
This should be blue.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
为什么 15 个类等于 150 分,而 1 个 ID 等于 100 分,为什么文本是红色的?
显然,分数不只是总计;他们是串联的。在这里阅读更多相关信息 - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
这是否意味着我们的选择器中的类 = 0,0,15,0
OR 0,1,5,0
?
(我的直觉告诉我是前者,因为我们知道 ID 选择器的特殊性如下所示:0,1,0,0
)
最佳答案
Pekka's answer 实际上是正确的,并且可能是思考问题的最佳方式。
但是,正如许多人已经指出的那样,W3C CSS 建议声明“连接三个数字 a-b-c(在具有大基数的数字系统中)给出了特异性。”所以我这个极客只需要弄清楚这个基数有多大。
事实证明,用于实现此标准算法的“非常大的基数”(至少 4 种最常用的浏览器*)是 256 或 28.
这意味着用 0 个 id 和 256 个类名指定的样式将覆盖仅用 1 个 id 指定的样式。我用一些 fiddle 测试了这个:
...but, alas 256 ids are not enough to override 1 inline style (更新于 2012 年 8 月 15 日——您必须使用
!important
)
因此实际上有一个“积分系统”,但它不是以 10 为底数,而是以 256 为底数。这是它的工作原理:
(28)2 或 65536,乘以选择器中的 ID 数量
- (28)1 或 256,乘以选择器中类名的数量
- (28)0 或 1,乘以选择器中标记名称的数量
这对于传达概念的粗略练习来说不是很实用。
这可能就是关于该主题的文章一直使用 10 进制的原因。
***** [Opera 使用 216(参见 karlcow 的评论)。其他一些选择器引擎使用 infinity — 实际上没有积分系统(参见 Simon Sapin 的评论)。]
2014 年 7 月更新:
正如 Blazemonger 在今年早些时候指出的那样,webkit 浏览器(Chrome、Safari)现在似乎使用了比 256 更高的基数。也许是 216,比如 Opera? IE 和 Firefox 仍然使用 256。
2021 年 3 月更新:
Firefox 不再使用 256 作为基础。
关于css - CSS specificity中的points是怎么计算的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42164071/