用类选择器覆盖h4的规则

Question

我有以下html：

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

以下CSS：

.main .container h4 {
 color: red;   

}
.test {
 color: blue;   
}

为什么类.test不会覆盖颜色规则？我怎么能做到这一点？

由于

Answer 1

这是一个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.）
  
• 计算选择器（= b）
中的ID属性数   
• 计算选择器（= c）
中其他属性和伪类的数量   
• 计算选择器中的元素名称和伪元素的数量（= d）
  
• 特异性仅基于选择器的形式。特别是，“[id = p33]”形式的选择器被计为属性选择器（a = 0，b = 0，c = 1，d = 0），即使id属性被定义为“ID” “在源文件的DTD中。
  

     

连接四个数字a-b-c-d（在具有大碱基的数字系统中）给出了特异性。