为何CSS子选择器选中所有非直接子元素？技术求助

问题场景 #

HTML代码：

<ul class="m">
    <li>test</li>
    <li>l1
        <ul>
            <li>l11</li>
            <li>l12</li>
        </ul>
    </li>
    <li>l2</li>
</ul>

期望仅选中类为m的<ul>的直接子元素<li>，使用的CSS规则：

ul.m> li{
    color: orange;
}

实际现象：所有<li>都显示为橙色，包括内部嵌套的<li>。

原因分析 #

你的子选择器ul.m > li是生效的，它确实只选中了类m的<ul>的直接子<li>。之所以所有<li>都变橙色，是因为CSS的color属性属于可继承属性——直接子<li>的橙色会被它内部的子元素（包括嵌套的<li>）继承，导致视觉上所有<li>都呈现橙色。

解决方法 #

如果要让嵌套的<li>不继承这个颜色，只需给内部的<li>重置颜色即可，比如：

ul.m > li {
    color: orange;
}
/* 重置嵌套li的颜色为默认值 */
ul.m li li {
    color: initial;
}

或者也可以使用不会被继承的属性来区分（比如背景色、边框等），但针对颜色需求，重置继承属性是最直接的方案。

内容的提问来源于stack exchange，提问作者bib