为什么我的跨度是蓝色，而不是从其父级继承红色？ [英] Why is my span blue instead of inheriting red from its parent?

问题描述

为什么在以下代码 世界中，是蓝色而不是红色？

Why in the following code world is blue rather than red?

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

The specificity of .my_class is 0,0,1,0, but it inherits the color of #my_id which specificity is higher (0,1,0,0).

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

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

推荐答案

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

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

An inherited value takes effect for an element only if no other style declaration has been applied directly to the element.

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

This style applies to an element with id="my_id":

#my_id {
    color: red;
}

...并将应用于（继承）嵌套在具有 class = my_class 只有在未指定其颜色属性的情况下。

... and will apply (inherit) to an element nested within having class="my_class" only if its color property is otherwise unspecified.

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

...which no longer is the case once you declare:

.my_class {
    color: blue;
}

这篇关于为什么我的跨度是蓝色，而不是从其父级继承红色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！