为什么我的span蓝色而不是从其父级继承红色？

Question

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

.my_class的特异性是0,0,1,0，但它继承了#my_id的颜色，特异性更高（0,1,0,0）。

HTML：

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

CSS：

#my_id {
    color: red;
}

.my_class {
    color: blue;
}

Answer 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;
}

Answer 2

好问题。发生这种情况的原因，iiuc是由于遗传，而不是特异性。

这样看，如果跨度没有那个类，它将从父<p>元素继承红色，“world”将是红色。但请注意，这是由于继承。

通过类为跨度设置颜色时，将覆盖继承的值。

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

#my_id span {color: orange}

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

Answer 3

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

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

Answer 4

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