如何用CSS正确选择首/末子元素？求助排查选择失效问题

咱们先从正确的选择器用法说起，再聊聊你的选择器失效可能踩了哪些坑。

一、正确的首/末子元素选择器用法 #

• 选中父元素的第一个子元素：用:first-child伪类
  比如想选中.box下的第一个直接子元素li，可以写：

  .box > li:first-child {
    background: #ff0000;
  }
  

• 选中父元素的最后一个子元素：用:last-child伪类
  对应示例：

  .box > li:last-child {
    background: #00ff00;
  }
  

二、你的选择器为什么没生效？ #

这几个是最常见的“踩坑”场景：

1. 父元素里混了其他类型的子节点
   比如你想选.container里的第一个p，但.container的第一个子节点是<h3>、空格、换行甚至注释（浏览器会把这些解析成文本节点），那p:first-child就不会生效——因为它要求目标元素必须是父元素的第一个子节点，而不是同类型的第一个。
   这种情况换用:first-of-type/:last-of-type就可以解决，它们会忽略其他类型的子节点，只找同类型的首/末元素：

   .container p:first-of-type {
     color: red;
   }
   .container p:last-of-type {
     color: blue;
   }
   

2. 选择器层级写错了
   比如你写成.container p:first-child，这会选中所有在.container范围内、自身是父元素第一个子节点的p，而不是.container的第一个子节点p。如果要选.container的直接第一个子元素p，得加上>写成.container > p:first-child。
3. 旧浏览器兼容性问题
   不过现在:first-child和:last-child在现代浏览器里支持都很好，除非你还需要兼容IE8及以下（IE8不支持:last-child）。

举个实际修复的例子 #

假设你的HTML结构是这样的：

<div class="container">
  <h2>标题</h2>
  <p>第一段内容</p>
  <p>第二段内容</p>
  <p>第三段内容</p>
</div>

原来用p:first-child不会生效，换成p:first-of-type就能正确选中第一个段落，用p:last-of-type选中最后一个段落。

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