CSS 继承 -- 颜色属性

Question

可能在这里遗漏了一些非常简单的东西，因为我对此很陌生——但是，我不明白为什么在下面的代码中，<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 class 中指定的那样——这是预期的.但是，<a> 和 <h2> 元素的颜色为 #6488880，如 <a> 和 <p> 的元素选择器中指定的那样。

JSFiddle 中演示了相同的问题 here

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

Answer 1

您将元素设置为特定颜色。设置父级的颜色不会覆盖它。您需要更具体地说明这些元素。

.hero a, 
.hero h2{
    color: inherit;
}

This article 可能会有帮助。

Answer 2

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

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

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

CSS inheritance -- color property