如何仅用CSS伪类修改嵌套列表：设置FRUITS蓝色、CITRUS紫色

嘿，我来帮你搞定这个需求，顺便把实现原理讲得明明白白～

首先咱们先搭一个符合需求的嵌套列表HTML结构：

<ul>
  <li>FRUITS
    <ul>
      <li>CITRUS
        <ul>
          <li>Orange</li>
          <li>Lemon</li>
        </ul>
      </li>
      <li>Berries
        <ul>
          <li>Strawberry</li>
          <li>Blueberry</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>VEGETABLES
    <ul>
      <li>Leafy Greens</li>
    </ul>
  </li>
</ul>

接下来是核心的CSS代码，完全用伪类实现，不用任何ID或Class：

/* 给最外层列表的第一个子项（FRUITS）设置蓝色 */
ul > li:first-child {
  color: blue;
}

/* 给FRUITS子列表的第一个子项（CITRUS）设置紫色 */
ul > li:first-child > ul > li:first-child {
  color: purple;
}

原理拆解： #

咱们一步步来看这些伪类的作用：

1. ul > li:first-child：

   • > 是直接子元素选择器，只匹配父元素的直接后代，不会选中嵌套更深的元素；
   • :first-child 是伪类，匹配父元素的第一个子元素。
     结合起来就是：找到页面中最外层的<ul>，选中它的第一个直接子<li>——也就是包含FRUITS的那个列表项，给它设置蓝色。

2. ul > li:first-child > ul > li:first-child：
   这是在第一个选择器的基础上，向下多嵌套了一层：

   • 先找到最外层<ul>的第一个<li>（也就是FRUITS那一项）；
   • 然后选中它里面的直接子<ul>；
   • 最后选中这个内层<ul>的第一个直接子<li>——也就是包含CITRUS的列表项，给它设置紫色。

如果你的嵌套结构里，FRUITS不是第一个子项，或者有多个类似层级的项，还可以用:nth-child(n)伪类来精准定位，比如FRUITS是第二个子项就用:nth-child(2)，灵活性很高。

这种方法的核心就是利用DOM结构的层级关系 + 伪类的位置匹配能力，完全不需要给元素加额外的标识，完美符合你的需求～

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