我偶然发现了这个博客-
http://www.htmldog.com/guides/cssadvanced/specificity/
它指出,特异性是CSS的评分系统。它告诉我们元素值1分,类值10分,ID值100分。上面还说,这些点是总和,总的数量是选择器的特异性。
例如:
身体
=1分
身体包装器
=11分
身体包装#容器
=111分
因此,使用这些要点,我希望以下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
或
0,1,5,0
?
(我的直觉告诉我这是前者,正如我们所知,ID选择器的特殊性如下所示:
0,1,0,0
)
