如何仅用CSS为父列表一级子项设置样式并排除子列表？

你现在遇到的问题是：想给顶级<ol>的直接子<li>设置红色，但当子列表嵌套在顶级<li>内部时，子列表的<li>也跟着变成红色了——哪怕你的CSS选择器ol:first-child > li只选中了顶级列表的直接子项。

这其实是CSS继承特性导致的：顶级<li>的color属性会被它内部的所有子元素继承，包括嵌套的子列表<li>，而不是你的选择器直接选中了子列表项。

下面是针对你场景的两种解决方案，都不需要修改HTML结构：

先回顾你的问题场景 #

有问题的代码（子列表继承了红色） #

CSS：

ol:first-child > li { color: red; }

HTML：

<ol>
  <li>Numbered list item 1</li>
  <li>Numbered list item 2
    <ol>
      <li>sublist item 1</li>
      <li>sublist item 2</li>
    </ol>
  </li>
  <li>Numbered list item 3</li>
</ol>

你尝试过的有效但无法使用的方式（修改HTML） #

把嵌套列表从顶级<li>中移出：

<ol>
  <li>Numbered list item 1</li>
  <li>Numbered list item 2</li>
  <ol>
    <li>sublist item 1</li>
    <li>sublist item 2</li>
  </ol>
  <li>Numbered list item 3</li>
</ol>

但你无法修改HTML，所以需要用CSS解决。

解决方案1：重置子列表的文本颜色 #

通过更精确的选择器，给嵌套在顶级<li>里的子列表<li>设置默认颜色：

ol:first-child > li {
  color: red;
}

/* 重置子列表中的li为默认文本颜色 */
ol:first-child > li ol li {
  color: #000; /* 或者用 inherit 继承父级ol的默认颜色 */
}

解决方案2：使用all: revert快速重置样式 #

如果你不想手动指定颜色值，可以用all: revert让子列表<li>恢复浏览器默认样式，这样能一次性解决所有继承的样式问题：

ol:first-child > li {
  color: red;
}

ol:first-child > li ol li {
  all: revert;
}

这两种方案都能让顶级<li>保持红色，同时让嵌套子列表的<li>不受影响，完全符合你的需求。

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