为何li:first-child选择器会使第二个子元素也变为红色？

这是个非常典型的CSS选择器理解误区，我来帮你理清楚其中的逻辑！

你对li:first-child的理解偏差 #

你原本以为这个选择器是「将所有作为ul父元素第一个子元素的li设为红色」，但实际上它的逻辑是：

选中所有li元素，且这个li是它任意父元素的第一个子元素。

换句话说，只要某个li是它所在父容器（不管是ul还是ol）的第一个子节点，就会被这个选择器命中。

结合你的代码分析 #

看你的HTML结构：

<ul>
  <li>Peter 
    <ol>
      <li>Juan</li> <!-- 这是ol的第一个子元素，且是li，符合条件 -->
      <li>Samuel</li>
    </ol>
  </li>
  <li>John 
    <ol>
      <li>Patrick</li> <!-- 同样是ol的第一个子元素+li，符合条件 -->
      <li>Spongebob</li>
    </ol>
  </li>
  <li>Sara 
    <ol>
      <li>Jonathan</li> <!-- 同上 -->
      <li>Kragie</li>
    </ol>
  </li>
</ul>

• 外层ul的第一个li（Peter）：是ul的第一个子元素，同时是li，被选中变红；
• 每个ol里的第一个li：是各自ol的第一个子元素，同时是li，所以也会被li:first-child选中，自然也会变红。

如何实现你原本预期的效果？ #

如果你只想选中ul的直接子元素中的第一个li，可以用**子组合器>**来限定层级，这样只会匹配ul的直接子节点，不会影响嵌套的ol里的li：

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

这样就只有外层的Peter会变成红色，嵌套的Juan、Patrick等都不会被选中啦。

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