用类选择器覆盖h4的规则

问题描述 投票:0回答:2

我有以下html:

<div class="main">
  <div class="container">
      <h4 class="test"> Test </h4>
  </div>
</div>​

以及以下CSS:

.main .container h4 {
 color: red;   

}
.test {
 color: blue;   
}

为什么类.test不会覆盖颜色规则?我该怎么做?

谢谢

css
2个回答
7
投票

这是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(在基数较大的数字系统中串联)给出了特异性。


0
投票

我有同样的问题,但添加了href

© www.soinside.com 2019 - 2024. All rights reserved.