为什么我的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

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

以这种方式看待它，如果跨度没有该类，它将从父级＆lt; p＆gt;继承红色。元素和“世界”将是红色的。但请注意，这是由于继承。

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

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

#my_id span {color: orange}

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

Answer 2

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

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

Answer 3

一种更简单的方法来考虑它，特异性顺序适用于在同一级别，如果某个样式位于父更多本地，那么它适用，无论是否祖先的风格具有较高的特异性（因为它距离较远，或者局部较少）。

Answer 4

请参阅：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;
}