首页 > 文章 > 前端

CSS中first-child与first-of-type区别详解

时间：2026-03-27 22:12:38 172浏览收藏

CSS中的:first-child和:first-of-type虽常被混淆，实则逻辑迥异：前者严格认“位置”，只匹配父元素中**绝对第一个子节点**（哪怕前面有空格、换行或其它标签，都会导致失配）；后者专注“类型”，在所有同名兄弟元素中精准定位**首个出现的该标签元素**，完全无视其他类型节点的干扰。二者在纯同标签结构中表现一致，但一旦HTML混排或存在隐藏文本节点，差异立现——:first-of-type更稳健、更符合实际开发需求，而:first-child则对DOM结构洁净度要求极高。掌握这一区别，能帮你避开样式失效的隐形陷阱，写出更可靠、可维护的CSS选择器。

css:first-child和:first-of-type有什么区别_精准选择首个元素

first-child 只认位置，不认标签类型

:first-child 判断的是某个元素是否是其父容器的**第一个子节点**，完全不管它是什么标签、什么类型。哪怕前面有注释、文本节点（比如空格换行），或者

前面插了个，只要它不是第一个，就匹配不上。

常见错误现象：

中的 A 能被 li:first-child 选中；但若写成

hintA
B

，li:first-child 就失效了——因为

已经不是第一个子元素。

实操建议：

用 :first-child 时，确保目标元素在 DOM 树中**严格处于子节点序列首位**
调试时可打开浏览器开发者工具，右键检查父元素 → 查看「Elements」面板里的子节点顺序（含文本节点）
避免依赖 HTML 源码缩进或换行，它们会生成空文本节点，影响匹配

first-of-type 只认标签名，不认位置

:first-of-type 匹配的是：在所有同名兄弟元素中，**出现顺序最早的那一个**。它会跳过其他类型的兄弟节点，只在同标签中排序。

使用场景：父容器里混排了多种元素，但你想精准定位某类标签的第一个实例。比如

intro

`title`

content

中，p:first-of-type 会命中第一个

，即使它不是整个

的第一个子元素。

实操建议：

h2:first-of-type 在多个
并存时，总能选中第一个，不管前面有没有
或
注意“同类型”指**相同标签名 + 相同命名空间**（比如 SVG 中的和 HTML 中的不算同类）
它对自定义元素也有效，my-button:first-of-type 会匹配同级中第一个

为什么 div:first-child 和 div:first-of-type 结果经常一样？

当父容器下所有子元素都是

时，二者效果重合——第一个

既是第一个子元素，也是第一个

类型元素。

但只要插入一个不同标签，差异立刻暴露：

<section>
  <header>Top</header>
  <div class="item">1</div>
  <div class="item">2</div>
</section>

此时：

div:first-child → 不匹配（
是第二个子元素）
div:first-of-type → 匹配第一个

性能上无显著差异，两者都是 CSS 选择器引擎的常规匹配逻辑，但 :first-of-type 需要遍历同名兄弟节点，理论上略多一次类型过滤。

容易被忽略的边界情况

这两个伪类都不匹配动态插入的元素（除非重新触发样式计算），也不受 display: none 影响——隐藏的元素仍参与计数。

关键陷阱：

CSS中first-child与first-of-type区别详解

first-child 只认位置，不认标签类型

first-of-type 只认标签名，不认位置

title

并存时，总能选中第一个，不管前面有没有 或

为什么 div:first-child 和 div:first-of-type 结果经常一样？

容易被忽略的边界情况

`title`

并存时，总能选中第一个，不管前面有没有
或