为什么CSS直接子选择器将样式应用于间接子节点

Question

我有以下HTML代码：

<div id="test">
<span>
    test 
    <span>test</span>
</span>        
</div>  

以下CSS代码：

#test > span {
color: red;
}

上面的代码是不是应该只选择测试div的直接子跨度？因此，只有第一个“测试”单词应为红色，但不应选择子跨度内的第二个“测试”单词。或者我弄错了？

Answer 1

在其他条件相同的情况下，范围的默认样式为：

span { color: inherit; }

因此，虽然规则color: red;不会直接应用于它，但它将从父元素的颜色中获取颜色。

如需比较，请参阅what happens if you explicitly say span { color: blue; }。

Answer 2

只需为第一个span子元素保留样式即可。

    #test > span {
    color: red; 
    }

为第二个span子元素添加样式。

    <div id="test">
    <span>test 
    <span style="color: black;">test</span>
    </span>        
    </div>

或者您可以像这样为span元素设置一个类。

    .red_color {
    color: red; 
    }

并将其添加到span元素中。

    <div id="test">
    <span>test 
    <span class="red_color">test</span>
    </span>        
    </div>