css - 使用类选择器覆盖 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 不会覆盖颜色规则？我怎样才能做到这一点？

谢谢

​</p>

Answer 1

这是一个特异性问题。

特异性是某个选择器的重要性。在这种情况下，您的第一个声明使用两个类和一个元素。这意味着只有内联样式、#id 或具有更多类的东西才能覆盖它。

如果你想影响班级test，我们可以使用.main .container .test，这是3个班级，现在将重写它！

如果两件事具有相同的特异性，例如，如果您.main .container h4再次使用，则文档中最后一个将优先。

无论您的特殊性或它在文档中的位置如何，都有一种方法可以覆盖，那就是通过添加!important某种样式，例如.test { color: blue !important; }. 如果您可以使用上述内容，则不建议这样做，因为这可能会导致将来出现问题。

规范可以在这里找到

选择器的特异性计算如下：

• 计数 1 如果声明来自是“样式”属性而不是带有选择器的规则，否则为 0 (= a) （在 HTML 中，元素的“样式”属性的值是样式表规则。这些规则没有选择器，所以 a=1、b=0、c=0 和 d=0。）
• 统计选择器中 ID 属性的数量（= b）
• 计算选择器中其他属性和伪类的数量（= c）
• 计算选择器中元素名称和伪元素的数量（= d）
• 特异性仅基于选择器的形式。特别是，“[id=p33]”形式的选择器被视为属性选择器（a=0，b=0，c=1，d=0），即使 id 属性被定义为“ID " 在源文档的 DTD 中。

连接四个数字 abcd（在具有大基数的数字系统中）给出了特异性。