:first-child与:first-of-type区别详解
时间：2026-02-14 15:18:48 303浏览 收藏
本文深入解析了CSS伪类`:first-child`与`:first-of-type`的本质区别：前者严格要求目标元素必须是父容器的**第一个子节点**，极易因注释、空格、前置其他标签等DOM细节而失效；后者则只关注**同类型标签中首个出现的元素**，语义更清晰、容错性更强。通过真实HTML结构对比和常见踩坑场景（如CMS注入、框架Fragment打乱顺序），文章揭示了二者在实际开发中的行为差异，并强调——在现代前端环境中，过度依赖伪类定位风险高，推荐结合语义化class或JS动态标记实现更稳定、可维护的选择逻辑。
为什么 :first-child 有时选不到想要的第一个元素
因为 常见错误场景： 例如： 只要父 注意点： 看这段 HTML： 此时： 伪类依赖 DOM 结构顺序，而结构容易被动态插入、SSR 注入或 CMS 模板改动破坏。真正需要“第一个内容区块”“首条新闻”这类语义时，优先考虑： 伪类不是银弹，尤其在现代框架（React/Vue）中，DOM 节点可能被 Fragment、条件渲染或 Portal 打乱， 本篇关于《:first-child与:first-of-type区别详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！:first-child 要求目标元素**必须是父容器的第一个子节点**，且类型不限。如果父容器最前面是个 ，后面才是 div:first-child 就完全不匹配——哪怕它是页面里第一个 li:first-child 想高亮列表第一项，但实际 HTML 开头有注释或空格文本节点（虽然不可见，但仍是子节点） 或服务端注入的提示 ，导致目标元素失去“第一个”位置什么时候该用
:first-of-type:first-of-type 只关心**同类型标签中的第一个**，忽略中间夹杂的其他标签。它更适合“找某类元素的第一个实例”这种语义。div > p:first-of-type { color: red; }
，且它是所有 中 DOM 顺序最靠前的，就会命中——不管前面有没有 、p 和 P 在 HTML 中等价，但和 section、article 严格区分.item:first-of-type 不会只找带 item 类的第一个元素，而是找所有 div.item:first-of-type）中第一个 item 类
真实 DOM 结构下两者的差异演示
<article>
<h2>标题</h2>
<p>第一段</p>
<div>说明块</div>
<p>第二段</p>
</article>
article > p:first-child → ❌ 不匹配（ 不是 的第一个子元素）article > p:first-of-type → ✅ 匹配第一个 （即“第一段”）article > :first-child → ✅ 匹配 （通配符 + first-child）article > :first-of-type → ✅ 同样匹配 （它是所有同类型元素中第一个 ）精准定位建议：别只靠伪类，结合 class 更可靠
document.querySelector('.news-item').classList.add('is-first').news-item:first-of-type:not(.sponsored) 排除广告占位:first-of-type 看似宽松，其实也可能跨过预期边界。
