CSS特异性的计算方法是什么?
P粉823268006
P粉823268006 2023-08-23 09:46:01
0
2
661
<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>
P粉823268006
P粉823268006

全部回复(2)
P粉523335026

好问题。

我不能确定 - 我找到的所有文章都避免了多个类的示例,例如这里 - 但我假设当涉及比较特定性在类选择器和ID之间时,类只会被计算为一个值为15的值,无论它有多详细。

这与我对特定性行为的经验相符。

然而,必须有一些类的堆叠,因为

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

.o

更具体,我唯一的解释是堆叠类的特定性只针对彼此计算,而不针对ID计算。

更新:我现在有点明白了。这不是一个积分系统,关于类权重为15分的信息是不正确的。这是一个非常好解释的4部分编号系统,可以在这里找到。

起始点是4个数字:

style  id   class element
0,     0,   0,    0

根据W3C关于特定性的解释,上述规则的特定性值为:

#a            0,1,0,0    = 100
classes       0,0,15,0   = ...请参见评论

这是一个具有非常大(未定义?)基数的编号系统。

我的理解是,由于基数非常大,第4列中的任何数字都无法击败第3列中大于0的数字,第2列也是如此,第1列也是如此.... 这个理解正确吗?

我想知道是否有人对数学有更好的理解,能够解释这个编号系统以及如何在各个元素大于9时将其转换为十进制。

P粉920835423

Pekka的回答在实际上是正确的,也可能是思考这个问题的最佳方式。

然而,正如许多人已经指出的那样,W3C CSS推荐规范指出:“将三个数字a-b-c(在一个大基数的数字系统中)连接起来给出了特异性。”所以我内心的极客就必须弄清楚这个基数有多大。

结果发现,实现这个标准算法的“非常大的基数”(至少由4个最常用的浏览器*)是256或28

这意味着用0个id和256个类名指定的样式将会覆盖只用1个id指定的样式。我用一些fiddles进行了测试:

因此,实际上存在一个“点数系统”,但它不是基于10进制,而是基于256进制。下面是它的工作原理:

(28)2或65536,乘以选择器中id的数量

  • (28)1或256,乘以选择器中类名的数量
  • (28)0或1,乘以选择器中标签名的数量

这对于简单的概念传达来说并不是很实用。
这可能是为什么关于这个主题的文章一直使用基于10进制的原因。

***** [Opera使用216(见karlcow的评论)。其他一些选择器引擎使用无穷大 - 实际上没有点数系统(见Simon Sapin的评论)。]

更新,2014年7月:
正如Blazemonger今年早些时候指出的,webkit浏览器(Chrome,Safari)现在似乎使用比256更高的基数。也许是216,像Opera一样?IE和Firefox仍然使用256。

更新,2021年3月:
Firefox不再使用256作为基数。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!