当父元素有更具体的选择器时，为什么我的子元素不从其父元素继承颜色？答案

【问题标题】：Why doesn't my child element inherit color from its parent when parent has more specific selector?当父元素有更具体的选择器时，为什么我的子元素不从其父元素继承颜色？
【发布时间】：2011-03-07 02:46:28
【问题描述】：

为什么following code中的world是蓝色而不是红色？

.my_class 的特异性是0,0,1,0，但它应该继承#my_id 在(0,1,0,0) 的特异性更高的颜色。

#my_id {
    color: red;
}
.my_class {
    color: blue;
}

<p id='my_id'>
    Hello
    <span class='my_class'>
        world
    </span>
</p>

【问题讨论】：

标签： css inheritance css-specificity

【解决方案1】：

见：w3c: 6 Assigning property values, Cascading, and Inheritance - 6.2 Inheritance

只有在没有其他样式声明直接应用于元素时，继承的值才会对元素生效。

这种风格适用于带有id="my_id"的元素：

#my_id {
    color: red;
}

...并且将应用于（继承）嵌套在具有class="my_class" 的元素仅当其color 属性未指定。

...一旦你声明就不再是这种情况了：

.my_class {
    color: blue;
}

【讨论】：

【解决方案2】：

发生这种情况的原因是由于继承，而不是特异性。

这样看，如果 span 没有那个类，它会从父

元素继承红色，“world”会是红色。但请注意，这是由于继承。

当您通过类为跨度设置颜色时，它会覆盖继承的值。

特异性用于确定在多个竞争规则中使用哪个规则。在您的示例中，没有竞争规则，因此特异性不会发挥作用。但是，如果您将其添加到您的样式中：

#my_id span {color: orange}

您会看到“世界”是橙色的，因为 id 的特殊性超过了类。

【讨论】：

【解决方案3】：

它基于特异性和位置。类直接应用于文本，但 ID 更远。

详细解释：http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

【讨论】：

【解决方案4】：

一种更简单的思考方式，特异性顺序适用于在同一级别，如果样式在父级更本地上，那么它适用，无论是否祖先的风格具有更高的特异性（因为它更远，或者更少本地化）。

【讨论】：