:first-child和:last-child选择器详解

本文深入解析了CSS中:first-child和:last-child伪类的选择逻辑、常见失效原因及实用替代方案，指出它们严格依赖元素在父容器中的实际DOM位置（而非视觉顺序或标签类型），因此易受注释、空白文本节点、动态插入内容等干扰；文章强调:first-child与:first-of-type的本质区别在于“位置优先”与“类型优先”，并提醒开发者在复杂结构或高性能敏感场景下优先考虑语义化class、flex布局或:nth-of-type等更稳健的写法，同时提供浏览器调试技巧和兼容性建议，帮助前端工程师避开隐蔽陷阱、写出更可靠、可维护的样式代码。

为什么 :first-child 没选中第一个

？

因为 :first-child 匹配的是其父元素的**第一个子元素**，且必须是该类型。如果父容器里第一个子元素是

，后面才是

，那所有

都不会被 p:first-child 选中——它们都不是父元素的第一个子节点。

常见错误现象：p:first-child 在结构如

标题

正文

中完全不生效。

• 确认目标元素是否真是父元素的首个子节点（用浏览器开发者工具看 DOM 树）
• 若只需选“第一个 p”，改用 :nth-of-type(1) 更可靠
• :first-child 对元素类型敏感，div:first-child 不会匹配
  …
  中的 div，因为 div 不是 span 的子元素

:last-child 在动态插入内容时为何失效？

它只看当前 DOM 结构中的**最后一个子节点**，不关心内容或 class。如果 JS 向父容器末尾追加一个

就立刻失去 :last-child 状态。

使用场景：给列表最后一项去下边框、给卡片组最右一项去右边距——但前提是结构稳定。

• 避免依赖 :last-child 控制关键布局，尤其在有 JS 动态增删节点的页面
• 替代方案：给父容器加 display: flex，用 margin-right: auto 或 gap 控制间距
• 若必须用，可配合 :not(:last-child) 统一设置中间项样式，例如 li:not(:last-child) { border-bottom: 1px solid #eee; }

:first-child 和 :first-of-type 到底差在哪？

区别在于匹配逻辑：:first-child 是“位置优先”，:first-of-type 是“类型优先”。前者要求既是第一个子节点，又是目标标签；后者只要求是该标签在父元素中出现的第一个实例。

示例结构：

• A

note

• B

• li:first-child → 匹配第一个
• A
（它是第一个子节点，且是 li）
• li:first-of-type → 也匹配
• A
（它是第一个出现的 li）
• 但如果结构变成

  note

  • A
  • B
  ：
  li:first-child → 不匹配任何 li（第一个子节点是 p）
  li:first-of-type → 匹配
• A

兼容性和性能要注意什么？

:first-child 和 :last-child 自 IE9 起就支持，现代项目基本无兼容问题。但性能上，它们属于“关系型伪类”，浏览器需遍历父元素全部子节点才能判定，嵌套过深或子节点极多时（比如渲染上千行表格），可能轻微拖慢样式计算。

• 不要在 body 或 html 这种含大量子节点的顶层元素上滥用这些选择器
• 避免链式写法如 section > div > p:first-child，层级越深，重排重绘开销越高
• 若只是为首尾项加简单修饰（如圆角、边框），用 class 显式标记（如 class="first"）反而更轻量、更可控

真正容易被忽略的是：这两个选择器对空白文本节点也敏感。换行符、缩进空格在 DOM 中可能生成 Text 节点，导致你以为的“第一个元素”其实前面有个空格节点，:first-child 就失效了。检查时打开开发者工具的“显示文本节点”选项（Chrome DevTools 设置里可开启），比单纯看 HTML 源码更准。

终于介绍完啦！小伙伴们，这篇关于《:first-child和:last-child选择器详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！