:first-of-type 匹配父元素中同标签名的第一个元素，而非第一个子元素；它忽略文本、注释及其他标签，只按标签类型在同类中取 DOM 顺序最早者。

:first-of-type 不是“选父元素第一个子元素”，而是“在父元素所有子节点中，挑出同标签名的那些，取其中 DOM 顺序最早的那一个”。它跳过文本节点、注释、其他标签，只比同类。这点搞错，样式就总对不上。

为什么 p:first-of-type 有时不生效？

常见误判是以为它会匹配「父元素里第一个

」——这没错，但前提是这个

真的是该父元素下同类型（即 p）中第一个出现的。如果父元素开头是

、

或 HTML 注释，p:first-of-type 仍会跳过它们，继续往后找第一个

。

• 失效示例：

  段落

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载
  中，p:first-child 完全不匹配，但 p:first-of-type 依然生效
• 调试建议：打开浏览器开发者工具 → 右键检查父元素 → 在 Elements 面板中看子节点列表（含 #text 和 ），确认目标 p 是否真为同类中首个
• 注意：源码换行、空格、服务端注入的提示
  都可能让 :first-child 失效，但 :first-of-type 不受影响

  怎么写才真正锁定“容器内首个直接子 p”？

  关键不是加更多层级，而是切断后代匹配路径，强制限定作用域。

  • 用 > 明确只查直接子元素：.article > p:first-of-type —— 只匹配 .article 下第一层的 p
  • 避免泛选择器：div p:first-of-type 是危险的，它等价于 div * p:first-of-type，会钻进任意深度，比如命中侧边栏广告位里的 p
  • 若需排除特定容器（如广告、插槽），用 :not() 组合：.post-body > :not(.ad-slot, .placeholder) > p:first-of-type

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

  :first-child 只认位置，不认标签类型；:first-of-type 只认标签名，不认位置。二者在纯同标签结构中效果相同，但混排时行为迥异。

  • li:first-child 要求目标
  • 必须是
    的第一个子节点，哪怕前面只有换行符也会失效
  • li:first-of-type 会忽略
    开头的
    、
    或注释，只要它是所有
  • 中 DOM 顺序最早的，就匹配
  • 兼容性提醒：:first-of-type IE8 不支持；若需兼容旧环境，得用 class 或 JS 回退

  最常被忽略的一点：作用域永远由选择器中离目标元素最近的父级决定，不是整个页面或最外层容器。写 article p:first-of-type，它匹配的是每个 article 内部各自的首个 p，不是全局唯一一个。