CSS继承——颜色属性

<分区>

可能在这里遗漏了一些非常简单的东西，因为我对此很陌生——但是，我不明白为什么在下面的代码中，<a>和 <h2>元素不继承 color属性(白色)来自 .hero类(class)。尽可能简化代码。

HTML:

<section class="hero container">
    <h2>A header!</h2>
    <p>Some stuff!!!</p>
    <a href="something.html">Linky</a>
</section>

CSS:

a {
    color: #648880;
}

h2 {
    color: #648880;
}

.hero {
    color: #fff;
}

这段代码的结果是 <p>元素有带颜色的文本 #fff ，如 .hero 中指定类——这是预期的。然而，<a> & <h2>元素有颜色#6488880 ，如 <a> 的元素选择器中指定的那样& <p> .

JSFiddle 中演示了相同的问题 here

不应该 .hero类(class)的color属性将覆盖 color元素选择器中的属性？我是否完全误解了特异性？我当然可以用.hero a或 .hero h2 ，但我不明白为什么我必须这样做。

最佳答案

为什么您希望在父级上指定的属性会覆盖在子级上指定的属性？

特异性指的是一种确定规则优先级的方式选择相同的元素。父规则 (.hero) 的特殊性与其子规则 (a) 的特殊性无关。

在这种情况下，a 元素上的默认 color 是 inherit。但是，您明确指定了不同的颜色。父级上的任何特殊性或 !important 都不会导致它覆盖子级上指定的显式颜色。

关于CSS继承——颜色属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32552479/

相关文章：

css - 如何修复mat-tab的标题