html - 为什么 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;不会直接应用于它，但它会从父元素的颜色中获取它的颜色。

为了比较，看看如果你明确地说会发生什么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>