CSS特异性的要点
Sam*_*Sam 122 css css-selectors css-specificity
研究特异性我偶然发现了这个博客 - 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导致文本为蓝色:
CSS:
#a {
color: red;
}
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
color: blue;
}HTML:
<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等于100分？
编辑:
所以显然这些要点不仅仅是总和,它们是连在一起的.在这里阅读更多相关信息 - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
但是,这是否意味着我们的选择器中的类= 0,0,15,0OR 0,1,5,0？
我的直觉告诉我它是前者,因为我们知道ID选择器的特异性如下所示: 0,1,0,0
Fau*_*ust 136
Pekka的答案几乎是正确的,可能是思考这个问题的最佳方式.
然而,正如许多人已经指出的那样,W3C CSS建议指出"连接三个数字abc(在一个具有大基数的系统中)给出了特异性." 所以我的极客只需要弄清楚这个基地有多大.
事实证明,实现这个标准算法的"非常大的基础"(至少是4个最常用的浏览器*)是256或28.
这意味着使用0 ids和256个类名指定的样式将覆盖仅使用1个id指定的样式.我用一些小提琴测试了这个:
- 255类是不足够覆盖1号
- ......但256类是 足以覆盖1号
......但是,唉256个ID是不足够覆盖1种内嵌样式 (更新2012年8月15日-你将不得不使用
!important)
所以实际上有一个"点系统",但它不是基数10.它是256的基础.以下是它的工作原理:
(2 8)2或65536,乘以选择器中的id数
+(2 8)1或256,乘以选择器中的类名数
+(2 8)0或1,乘以标签数量 -选择器中的名称
对于传播概念的背包练习来说,这不是很实用.
这可能是关于该主题的文章一直在使用基础10的原因.
*****[Opera使用2 16(参见karlcow的评论).其他一些选择器引擎使用无穷大 - 实际上没有积分系统(参见Simon Sapin的评论).
更新,2014年7月:
正如Blazemonger在今年早些时候指出的那样,webkit浏览器(chrome,safari)现在似乎使用了比256更高的基数.也许是2 16,就像Opera一样？IE和Firefox仍然使用256.
- 重要提示:请注意**数字256不在[spec](http://www.w3.org/TR/CSS2/cascade.html#cascade)**中.因此,这个答案描述了一个(不可否认的有用)实现细节. (34认同)
- @MattFenwick说,不仅256不在规范中,而且在实施过程中也有所不同.它在Opera中显然更大.在WeasyPrint和cssselect中它是"无穷大":我使用[整数元组](https://github.com/SimonSapin/cssselect/blob/v0.7.1/cssselect/parser.py#L88)而不是单个整数. (6认同)
- 在当前版本的webkit(Chrome和Safari)中,256似乎不够,进一步强调了@MattFenwick的观点. (6认同)
- 老实说,这个答案比Pekka的答案更实用.基本上@Matt Fenwick说:你所描述的是规范的*实际实现*.这是一个有缺陷的,但不是任何应该做的事情,无论是作者还是实施者. (4认同)
- @Faust opera使用16位而不是8位 (3认同)
- 在这里说提供的小提琴在 Firefox 上不再按预期工作，但 IE11 仍然这样做。 (3认同)
Pek*_*ica 28
好问题.
我无法确定 - 我设法找到的所有文章都避免了多个类的例子,例如这里 - 但我认为当比较类选择器和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 = ... see the comments
这是一个具有非常大(未定义？)基数的编号系统.
我的理解是因为基数非常大,第4列中的数字不能超过第3列中的数字> 0,第2列第1列也是如此....这是正确的吗？
我会感兴趣的是,对数学有更好掌握的人是否可以解释编号系统以及当单个元素大于9时如何将其转换为十进制.
- 对于数学方面,我们可以在这里使用16(因为没有一个单独的数字超过15).所以0,1,0,0 = 0100h = 256 0,0,15,0 = 00f0h = 240 256> 240因此id选择器获胜. (5认同)
当前的Selectors Level 4 Working Draft在描述CSS中的特异性方面做得很好:
通过比较三个组分来比较特异性:具有较大A值的特异性更具体; 如果两个A值相关联,则具有较大B值的特异性更具体; 如果两个B值也相关,那么c值越大的特异性就越具体; 如果所有值都绑定,则两个特征相等.
这意味着值A,B和C完全相互独立.
15个类没有给你的选择器一个150的特异性得分,它给它一个15 的B值.单个A值足以压倒它.
作为一个比喻,想象一个1个大父母,1个父母和1个孩子的家庭.这可以表示为1,1,1.如果父母有15个孩子,那不会突然使他们成为另一个孩子(1,2,0).这意味着父母比只有1个孩子(1,1,15)的责任要多得多.;)
同样的文件也继续说:
由于存储限制,实现可能对A,B或c的大小有限制.如果是这样,高于限制的值必须限制在该限制内,而不是溢出.
这已被添加以解决Faust的答案中提出的问题,即2012年的CSS实现允许特异性值相互溢出.
早在2012年,大多数浏览器都实现了255的限制,但允许这种限制溢出.255个类的A,B,c特异性得分为0,255,0,但256个类溢出并且A,B,c得分为1,0,0.突然间,我们的B值成了我们的A值.Selectors Level 4文档通过声明永远不允许溢出来完全解决该问题.有了这个实施,既 255种256类将具有相同的A,B,C得分为0,255,0.
Faust的答案中给出的问题已经在大多数现代浏览器中得到修复.
- 在我提出这个问题6年后,它仍然得到了这样的精彩回复 - 感谢您加入知识库,詹姆斯.很棒的答案! (2认同)
我目前正在使用CSS Mastery:Advanced Web Standards Solutions这本书.
第1章,第16页说:
要计算规则的具体方式,请为每种类型的选择器分配一个数值.然后通过将每个选择器的值相加来计算规则的特异性.不幸的是,特异性不是在基数10中计算的,而是在未指明的高基数下计算的.这是为了确保高度特定的选择器(例如ID选择器)永远不会被许多不太具体的选择器覆盖,例如类型选择器.
(强调我的)和
选择器的特异性分为四个组成部分:a,b,c和d.
- 如果样式是内联样式,则a = 1
- b = id选择器的总数
- c =类,伪类和属性选择器的数量
- d =类型选择器和伪元素选择器的数量
接着说,您通常可以在base-10中进行计算,但前提是所有列的值都小于10.
在你的例子中,id不值100分; 每个都值得[0, 1, 0, 0]点.因此,一个id击败15个类,因为[0, 1, 0, 0]它[0, 0, 15, 0]比高基数系统大.
