CSS如何仅为父元素应用样式规则 不作用于嵌套子元素

现有代码片段 #

CSS样式 #

.basic-content {
  color: purple;
}
.parent > li {
  color: red;
}
.parent > li > ul > li {
  color: blue;
}

HTML结构 #

<div class="basic-content">
    <p>I don't want to be a specific color, so I should be purple (the basic content color)</p>
    <p>I don't want to be a specific color, so I should be purple (the basic content color)</p>
    <p>I don't want to be a specific color, so I should be purple (the basic content color)</p>
    <ul class="parent">
        <li>I want to be red</li>
        <li>I want to be red</li>
        <li>I want to be red
            <ul>
                <li>I want to be blue</li>
                <li>I want to be blue
                    <ul>
                        <li>* I don't want to be a specific color, so I should be purple (the basic content color)</li>
                        <li>* I don't want to be a specific color, so I should be purple (the basic content color)</li>
                        <li>* I don't want to be a specific color, so I should be purple (the basic content color)</li>
                    </ul>
                </li>
                <li>I want to be blue</li>
                <li>I want to be blue</li>
            </ul>
        </li>
        <li>I want to be red</li>
        <li>I want to be red</li>
    </ul>
</div>

实际运行效果：
#

问题1：为什么用了>子选择器，最内层li还是继承了蓝色？ #

• 子选择器>的作用仅为限制选择器的匹配范围：它只会选中满足严格直接父子层级关系的元素，给这些命中的元素应用样式，完全不控制这些元素的后代属性继承逻辑。
• color是CSS默认开启继承的属性：你写的.parent > li > ul > li规则已经准确命中了第二层需要显示蓝色的li元素，给它设置了color: blue。这个元素内部所有没有单独指定color值的后代元素（包括第三层、更深层任意嵌套的li），都会顺着DOM树从父级继承到蓝色样式，这个表现和你写选择器时是否使用>没有任何关系。

问题2：如何让深层嵌套的子元素保留基础紫色？ #

只需要新增一条CSS规则，选中第二层li下所有嵌套的后代li，将它们的颜色重置为基础紫色即可，后续不管再加多少层嵌套，规则都能统一生效，不需要逐层写选择器匹配。
修正后的完整CSS代码：

.basic-content {
  color: purple;
}
.parent > li {
  color: red;
}
.parent > li > ul > li {
  color: blue;
}
/* 重置第二层li下所有嵌套列表项的颜色为基础紫色 */
.parent > li > ul > li li {
  color: purple;
}

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