17370845950

:first-child和:last-child伪类分别匹配父元素中同级第一个和最后一个子元素，且要求标签名一致；它们依据DOM顺序而非元素类型，与:first-of-type等不同。

要选中父容器内的第一个或最后一个子元素，CSS 提供了 :first-child 和 :last-child 伪类。它们匹配的是在**同级元素中位置靠前或靠后**的元素，且必须是某个父元素的直接子元素。

选中第一个子元素（:first-child）

该伪类选中其父元素下**第一个出现的子元素**，前提是该子元素的标签名与选择器一致。

• 例如 li:first-child 会匹配
  或
  中第一个
• 元素
• 如果第一个子元素不是 li（比如开头有个
  ），那这个 li 就不会被选中
• 它不关心元素内容或 class，只看 DOM 树中的顺序和标签是否匹配

选中最后一个子元素（:last-child）

与 :first-child 类似，:last-child 匹配父元素中**最后一个子元素**，且标签需一致。

• div:last-child 只有当某个父容器的最后一个子节点是 时才生效
• 若末尾是 或文本节点，即使前面有多个 div，也不会命中
• 常用于移除列表最后一项的边框、调整间距等场景

注意：first-child / last-child 不等于 first-of-type / last-of-type

这是容易混淆的点：:first-child 看的是“第几个孩子”，而 :first-of-type 看的是“同类型中的第一个”。比如：

HTML 示例：

  
标题

  
段落1

  
段落2

• p:first-child → 不匹配（
  不是第一个子元素）
• p:first-of-type → 匹配第一个
  （即“段落1”）
• p:last-of-type → 匹配“段落2”，而 p:last-child 同样匹配它（因为此处它也恰好是最后一个子元素）

实用小技巧

• 想给列表第一项加顶部边框、最后一项加底部边框？用 li:first-child 和 li:last-child
• 清除浮动容器内最后一行子项的右外边距？可结合 :last-child 设置 margin-right: 0
• 配合 :not() 使用，如 li:not(:last-child) 可为除最后一项外的所有项统一加右边线