CSS继承-颜色属性[重复]答案

【问题标题】：CSS inheritance -- color property [duplicate]CSS继承-颜色属性[重复]
【发布时间】：2015-09-13 17:23:58
【问题描述】：

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

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 类的color 属性不应该覆盖元素选择器中的color 属性吗？我是否以某种方式完全误解了特异性？我当然可以使用.hero a 或.hero h2，但我不明白为什么必须这样做。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

This article 可能会有所帮助。

【讨论】：