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

我有以下html代码：

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

---

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

在所有其他条件相同的情况下，跨度的默认样式为：

span { color: inherit; }

所以，虽然规则颜色：红色；不会直接应用于它，它将从父元素的颜色中获取其颜色

---

有关比较，请参见。

简单地保留第一个span子元素的样式

    #test > span {
    color: red; 
    }

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

并为第二个跨度子元素添加样式

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

并将其添加到span元素中

    #test > span {
    color: red; 
    }

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

---

您可以执行如下操作：span{color:black；}test>span{color:red；}因此，如果该选择器将对所有子项和子项的子项应用样式，那么该选择器有何用处，除非定义了它们自己的样式？？？并非所有属性都被继承。一般来说，如果它改变了文本的所有颜色、字体系列等，它可能会继承。否则，它可能不会。@MichaelSamuel-因为a正如cimmanon所说，并非所有属性都是继承的，b您可以为这些属性指定一个不太具体的常规值。我假设它适用于默认值为“继承”的属性……对吗？？