研究特异性时,我偶然发现了这个博客 - http://www.htmldog.com/guides/cssadvanced/specificity/
它指出特异性是CSS的一个得分系统。它告诉我们,元素值为1分,类值为10分,ID值为100分。它还继续说这些分数会被累加,总分就是选择器的特异性。
例如:
body = 1分
body .wrapper = 11分
body .wrapper #container = 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">
这应该是蓝色的。
</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)
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号