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

Question

为什么在下面的代码 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>

Answer 1

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

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

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

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

#my_id span {color: orange}

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

Answer 2

请参阅：w3c：6 分配属性值、级联和继承 - 6.2 继承

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

此样式适用于具有 的元素id="my_id"：

#my_id {
    color: red;
}

...并且class="my_class" 仅当其color属性未指定时才会应用于（继承）嵌套在 has 中的元素。

...一旦您声明，情况就不再如此：

.my_class {
    color: blue;
}

Answer 3

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

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

Answer 4

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