我有以下html:
<div class="main">
<div class="container">
<h4 class="test"> Test </h4>
</div>
</div>
以及以下CSS:
.main .container h4 {
color: red;
}
.test {
color: blue;
}
为什么类.test不会覆盖颜色规则?我该怎么做?
谢谢
这是specificity问题。
特异性是特定选择器的重要性。在这种情况下,您的第一个声明使用两个类和一个元素。这意味着只有内联样式,#id或具有更多类的东西才能覆盖它。
如果您想影响类test
,我们可以使用.main .container .test
,这是3个类,现在将覆盖它!
[如果两件事具有相同的特异性,例如,如果再次使用.main .container h4
,则文档中倒数第二个优先。
[有一种方法可以重写,而不论您的具体要求或文档的位置如何,即通过将!important
添加到某种样式(例如.test { color: blue !important; }
)中。如果可以使用上述内容,则不建议这样做,因为这可能会导致将来出现问题。
可以在here中找到规格
选择器的特异性计算如下:
- 如果声明来自于,则为1,是'style'属性,而不是带有选择器的规则,否则为0(否则== a)(在HTML中,元素的“ style”属性的值是样式表规则。这些规则没有选择器,因此a = 1,b = 0,c = 0和d = 0。)
- 计算选择器中ID属性的数量(= b)
- 计算选择器中其他属性和伪类的数量(= c)
- 计算选择器中元素名称和伪元素的数量(= d)
- 特异性仅基于选择器的形式。尤其是,即使将id属性定义为“ ID”,形式为[[id = p33]”的选择器也将被视为属性选择器(a = 0,b = 0,c = 1,d = 0)在原始文件的DTD中。”>
将四个数字a-b-c-d(在基数较大的数字系统中串联)给出了特异性。
我有同样的问题,但添加了href