:first-child要求元素必须是父容器的第一个子节点，而:first-of-type只匹配同类型元素中首个出现的；前者易受注释、空格或前置标签影响，后者更适用于找某类元素的第一个实例。

为什么 :first-child 有时选不到想要的第一个元素

因为 :first-child 要求目标元素**必须是父容器的第一个子节点**，且类型不限。如果父容器最前面是个

，后面才是

，那 div:first-child 就完全不匹配——哪怕它是页面里第一个

。

常见错误场景：

• 用 li:first-child 想高亮列表第一项，但实际 HTML 开头有注释或空格文本节点（虽然不可见，但仍是子节点）
• 组件模板中父容器顶部插入了 、 或服务端注入的提示 ，导致目标元素失去“第一个”位置

什么时候该用 :first-of-type

:first-of-type 只关心**同类型标签中的第一个**，忽略中间夹杂的其他标签。它更适合“找某类元素的第一个实例”这种语义。

例如：

div > p:first-of-type { color: red; }

只要父

下有至少一个

，且它是所有

中 DOM 顺序最靠前的，就会命中——不管前面有没有

、

或文本节点。

注意点：

• 类型指 HTML 标签名，p 和 P 在 HTML 中等价，但和 section、article 严格区分
• 不识别 class 或属性，.item:first-of-type 不会只找带 item 类的第一个元素，而是找所有
  （假设选择器是 div.item:first-of-type）中第一个

  ，再检查它是否有 item 类

  真实 DOM 结构下两者的差异演示

  看这段 HTML：

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

  <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 更可靠

  伪类依赖 DOM 结构顺序，而结构容易被动态插入、SSR 注入或 CMS 模板改动破坏。真正需要“第一个内容区块”“首条新闻”这类语义时，优先考虑：

  • 后端或构建时加明确 class，如
  • 用 JS 动态标记：document.querySelector('.news-item').classList.add('is-first')
  • 若必须用 CSS，组合使用更稳妥：.news-item:first-of-type:not(.sponsored) 排除广告占位

  伪类不是银弹，尤其在现代框架（React/Vue）中，DOM 节点可能被 Fragment、条件渲染或 Portal 打乱，:first-of-type 看似宽松，其实也可能跨过预期边界。