CSS特异性的计算方法是什么?
P粉823268006
2023-08-23 09:46:01
<p>研究特异性时,我偶然发现了这个博客 - http://www.htmldog.com/guides/cssadvanced/specificity/ </p>
<p>它指出特异性是CSS的一个得分系统。它告诉我们,元素值为1分,类值为10分,ID值为100分。它还继续说这些分数会被累加,总分就是选择器的特异性。</p>
<p><strong>例如:</strong> </p>
<blockquote>
<p><strong>body</strong> = 1分</p><p>
<strong>body .wrapper</strong> = 11分</p><p>
<strong>body .wrapper #container</strong> = 111分</p>
</blockquote>
<p>因此,使用这些分数,我期望以下的CSS和HTML会导致文本变为蓝色:</p>
<p>
<pre class="brush:css;toolbar:false;">#a {
color: red;
}
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
color: blue;
}</pre>
<pre class="brush:html;toolbar:false;"><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">
这应该是蓝色的。
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></pre>
</p>
<p>为什么文本是红色的,当15个类等于150分,而1个ID等于100分?</p>
<p>显然,这些分数不仅仅是累加的;它们是连接在一起的。在这里了解更多 - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html </p>
<p>这是否意味着我们选择器中的类 = <code>0,0,15,0</code> 或者 <code>0,1,5,0</code>?</p>
<p>(我的直觉告诉我应该是前者,因为我们知道ID选择器的特异性是这样的:<code>0,1,0,0</code>)</p>
好问题。
我不能确定 - 我找到的所有文章都避免了多个类的示例,例如这里 - 但我假设当涉及比较特定性在类选择器和ID之间时,类只会被计算为一个值为
15
的值,无论它有多详细。这与我对特定性行为的经验相符。
然而,必须有一些类的堆叠,因为
比
更具体,我唯一的解释是堆叠类的特定性只针对彼此计算,而不针对ID计算。
更新:我现在有点明白了。这不是一个积分系统,关于类权重为15分的信息是不正确的。这是一个非常好解释的4部分编号系统,可以在这里找到。
起始点是4个数字:
根据W3C关于特定性的解释,上述规则的特定性值为:
这是一个具有非常大(未定义?)基数的编号系统。
我的理解是,由于基数非常大,第4列中的任何数字都无法击败第3列中大于0的数字,第2列也是如此,第1列也是如此.... 这个理解正确吗?
我想知道是否有人对数学有更好的理解,能够解释这个编号系统以及如何在各个元素大于9时将其转换为十进制。
Pekka的回答在实际上是正确的,也可能是思考这个问题的最佳方式。
然而,正如许多人已经指出的那样,W3C CSS推荐规范指出:“将三个数字a-b-c(在一个大基数的数字系统中)连接起来给出了特异性。”所以我内心的极客就必须弄清楚这个基数有多大。
结果发现,实现这个标准算法的“非常大的基数”(至少由4个最常用的浏览器*)是256或28。
这意味着用0个id和256个类名指定的样式将会覆盖只用1个id指定的样式。我用一些fiddles进行了测试:
255个类名不足以覆盖1个id
...但是256个类名足以覆盖1个id
...并且256个标签名足以覆盖1个类名
...但是,遗憾的是256个id不足以覆盖1个内联样式(更新于2012/8/15 -- 您将需要使用
!important
)因此,实际上存在一个“点数系统”,但它不是基于10进制,而是基于256进制。下面是它的工作原理:
(28)2或65536,乘以选择器中id的数量
这对于简单的概念传达来说并不是很实用。
这可能是为什么关于这个主题的文章一直使用基于10进制的原因。
***** [Opera使用216(见karlcow的评论)。其他一些选择器引擎使用无穷大 - 实际上没有点数系统(见Simon Sapin的评论)。]
更新,2014年7月:
正如Blazemonger今年早些时候指出的,webkit浏览器(Chrome,Safari)现在似乎使用比256更高的基数。也许是216,像Opera一样?IE和Firefox仍然使用256。
更新,2021年3月:
Firefox不再使用256作为基数。