CSS选择父元素中第一个指定子元素的方法

p:first-child 之所以经常失效，根本原因在于它的匹配条件非常严格：p 必须是父元素下“第一个直接子节点”。但在实际开发中，HTML 中的注释、换行、缩进等内容，往往会先生成 #text 文本节点，占据这个“第一位”，导致 p 不再符合选择条件。更可靠、更常用的写法是使用 p:first-of-type，它不是按照所有子节点统一排序，而是按标签类型筛选，直接匹配父元素中的第一个 p 标签。

为什么 p:first-child 有时完全不起作用

问题通常不在于 CSS 选择器写错，而是在 DOM 结构中，“第一个子节点”本身就不是 p。HTML 注释、换行符、空格缩进产生的文本节点（#text），以及排在前面的

或

等元素，都会让 p 失去“父元素第一个子元素”的资格。

最直接的排查方法，就是打开浏览器开发者工具，展开父元素查看真实子节点列表：如果排在最前面的图标是 #text 或 ，那么 p:first-child 无法生效就是正常现象。

• p:first-child 要求这个 p 必须是父元素的**第一个直接子节点**，并且标签本身就是 p
• 即使结构看起来像

  n

  内容

  n
  ，其中的换行符也可能生成一个 #text 节点，导致 p 变成第二个子节点
• 它并不会判断“这是不是父元素中的第一个 p”，只看位置是否排第一——前面只要有其他节点，就不会匹配

p:first-of-type 才是选择父元素中第一个指定元素的正确方式

如果你的目标是选中“父元素中的第一个 p 元素”，无论它前面是否有标题、注释或空白节点，p:first-of-type 才是更准确的 CSS 选择器。它会按照标签名进行分组，并从所有 p 元素中匹配第一个出现的节点。

示例结构：

• article p:first-child → 不匹配（因为第一个子节点是 h2）
• article p:first-of-type → 成功匹配第一个 p（也就是“首段”）
• 注意作用范围：article > p:first-of-type 只会匹配 article 的**直接子 p**；而 article p:first-of-type 会匹配任意嵌套层级中的首个 p，使用时要特别留意

别随意使用 *:first-of-type，它很容易失控

*:first-of-type 表面上看像是在“匹配每种类型中的第一个元素”，但在真实项目里风险非常大：它可能把 、