:first-child仅匹配父元素第一个直接子节点且标签名严格一致，因注释、换行文本节点或前置元素导致失效；:first-of-type则按类型取首个，更容错。

:first-child 不是“选第一个 p”或“选第一个 li”的万能解，它只认一件事：这个元素是不是父容器的**第一个直接子节点**，且标签名必须匹配。不满足就失效，没商量。

为什么 :first-child 经常不生效

根本原因不是写错了选择器，而是 DOM 结构“藏了东西”：

• HTML 注释（）算文本节点，会抢占“第一个”位置
• 换行缩进产生的空白文本节点（比如
  \n

  内容

  \n
  中的 \n ）也会让 p 变成第二个子节点
• 前面插了个
  、 或甚至一个空的
  ，p:first-child 就彻底失联

  验证方法：打开浏览器开发者工具，展开父元素，看第一个子节点图标是

  还是 #text 或 。

  :first-child 和 :first-of-type 到底怎么选

  关键区别不在“谁更高级”，而在你要解决什么问题：

  

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

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

  下载

  • li:first-child → 你要样式化“列表里最顶上那个条目”，前提是它确实是第一个子元素（比如干净的
    • ...
    ）
  • li:first-of-type → 你要样式化“所有 li 中排第一的那个”，不管前面有没有
    或说明文字
  • 动态插入场景（比如 JS 在开头加提示框）：:first-of-type 更稳；纯静态、结构可控的组件内：:first-child 更语义清晰

  别硬记规则，打开控制台点两下 DOM 就知道该用哪个。

  常见误用：靠它清首段 margin-top

  很多人这么写：

  p { margin: 1.5em 0; }
  p:first-child { margin-top: 0; }
  

  但只要 CMS 插入一个 banner

  到文章开头，这个规则就失效，首段又多出 1.5em 空白。

  • 更健壮的做法：给容器设 margin-top: 0，再统一给所有 p 加 margin-top: 1.5em（靠继承和通用性兜底）
  • 如果非要用伪类，优先写 .article > *:first-of-type，比 p:first-child 更抗干扰
  • 注意：:first-child 在 Flex/Grid 容器中依然按 DOM 顺序匹配，order 或 grid-template-areas 不会影响它

  最后提醒一个真·盲区

  :first-child 在 Shadow DOM 内部完全不可见——你在自定义 Web Component 的 :host 样式里写 slot > p:first-child，只要 slot 的内容是从外部传入的，这条规则大概率不触发。这时候只能靠外部传 class，或者用 ::slotted(p:first-of-type)（需检查浏览器支持）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！