为什么CSS直接子元素选择器会应用样式到间接子元素？

Question

我有以下的html代码：

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

以下是相关的CSS代码：

#test > span {
color: red;
}

上述代码难道不应该只选择test div的直接子级span吗？因此，只有第一个“test”单词应该是红色的，但嵌套在子级span内部的第二个“test”单词不应选择。或者我理解错了吗？

- Michael Samuel

Answer 1

其他条件相同的情况下，span的默认样式将为：

span { color: inherit; }

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

为了比较，请参见如果您明确指定span { color: blue; }会发生什么。

- Quentin

---

你可以这样做：span{ color: black; } #test > span { color: red; } - Prisoner

那么，如果这个选择器会将样式应用于所有子元素和子元素的子元素，除非它们自己定义了样式，那么它有什么用处呢？ - Michael Samuel

并非所有属性都会被继承。一般来说，如果它改变了文本的任何内容（颜色、字体等），那么它可能会被继承。否则，它可能不会被继承。 - cimmanon

@MichaelSamuel — 因为 (a) 正如cimmanon所说，不是所有属性都被继承，以及 (b) 对于那些被继承的属性，你可以指定一个不太具体的一般值。 - Quentin

我假设它适用于默认值为“inherit”的属性...对吗？ - Michael Samuel

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>

- William Petersen