关于li:first-child选择器匹配范围差异的技术疑问

咱们先把你的代码清晰列出来，方便分析：

你的代码示例 #

HTML代码 #

<body>
  <ul> PARENT
    <li>CHILD 1
      <ul>
        <li>GRANDCHILD 1.1</li>
        <li>GRANDCHILD 1.2</li>
        <li>GRANDCHILD 1.3</li>
      </ul>
    </li>
    <li>CHILD 2
      <ul>
        <li>GRANDCHILD 2.1</li>
        <li>GRANDCHILD 2.2</li>
        <li>GRANDCHILD 2.3</li>
      </ul>
    </li>
    <li>CHILD 3
      <ul>
        <li>GRANDCHILD 3.1</li>
        <li>GRANDCHILD 3.2</li>
        <li>GRANDCHILD 3.3</li>
      </ul>
    </li>
  </ul>
</body>

CSS代码 #

li:first-child {
  background: chartreuse;
}

为什么会出现你观察到的现象？ #

核心要搞懂：first-child选择器的逻辑是「选中某个<li>，当且仅当它是自己父元素的第一个子元素」——不管这个父元素是外层的大<ul>，还是内部嵌套的小<ul>。咱们逐个拆解：

1. CHILD 1 被选中：
   它的父元素是最外层的<ul>。虽然代码里写了“PARENT”文本，但浏览器处理DOM时，要么把它当成无关的文本节点，要么你实际结构里它是注释/其他元素——总之CHILD 1是这个<ul>的第一个元素子节点，满足li:first-child的匹配规则，所以会被加上绿色背景。

2. GRANDCHILD 1.1、2.1、3.1 被选中：
   这三个<li>的父元素都是各自内部的小<ul>，而它们刚好是对应<ul>的第一个子元素，所以完全符合选择器要求，都会被标绿。

3. 为什么你觉得CHILD 1的所有子<li>都被选中？
   这是视觉上的小迷惑！CHILD 1本身被设置了绿色背景，它的内部<ul>是嵌套在它里面的，所以CHILD 1的背景色会填充它的整个内容区域——包括三个子<li>所在的空间。但实际上GRANDCHILD 1.2和1.3并没有被li:first-child选中，它们的背景色并不是被选择器直接设置的，只是“借”了父元素的背景空间而已（默认background-color是不继承的哦）。

如果你想精准控制匹配范围 #

• 只想选中最外层的第一个<li>（CHILD 1）：用子元素选择器限定层级，避免影响内部嵌套的<li>：

  ul > li:first-child {
    background: chartreuse;
  }
  

• 只想选中每个<ul>下的第一个<li>（不含外层的CHILD 1）：可以用后代选择器加限定：

  ul ul > li:first-child {
    background: chartreuse;
  }
  

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