使用CSS如何仅选中外层li元素而不选中内部嵌套的li元素

现有写法不生效有两个核心原因：

1. 通用li选择器会命中页面所有层级的li元素，没有做层级区分
2. color属于可继承CSS属性，外层li设置的红色会被内层嵌套的li默认继承，哪怕用:first-child匹配到外层li，内层元素还是会继承到红色，所以达不到预期效果。

推荐优先使用自定义类限定范围，避免影响页面其他列表结构：

步骤1：给顶层ul添加自定义类 #

<ul class="top-level-list">
  <li>Tag this as red
    <ul>
      <li>
        Dont' tag this as color red
      </li>
    </ul>
  </li>
  <li>Tag this as red
    <ul>
      <li>
        Dont' tag this as color red
      </li>
    </ul>
  </li>
</ul>

步骤2：编写对应CSS #

/* 仅匹配顶层ul的直接子li元素 */
.top-level-list > li {
  color: red;
}
/* 重置所有嵌套在内层的li颜色，initial为浏览器默认值，也可替换为你需要的具体色值 */
.top-level-list li li {
  color: initial;
}

如果不想修改HTML结构，且当前页面只有这一个顶层无序列表，也可以直接使用下面的CSS：

/* 从body节点开始匹配直接子级ul的直接子级li */
body > ul > li {
  color: red;
}
/* 重置所有嵌套li的颜色 */
li li {
  color: initial;
}

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