17370845950

:first-child是CSS伪类，匹配父元素下第一个子元素且标签名与选择器一致；它按位置匹配，而非类型，若首个子元素非目标标签则不生效。

想只选中父容器下的第一个子元素，用 :first-child 最直接。

什么是 :first-child？

它是一个CSS伪类，匹配**父元素下第一个子元素**，且该子元素的标签名要和选择器一致。注意：它看的是“位置”，不是“类型”——哪怕前面有其他标签，只要它是第一个子元素，就可能被选中。

常见写法和注意事项

基本语法：selector:first-child

• 例如 p:first-child 只会选中作为父元素第一个子节点的
  元素
• 如果父元素第一个子节点是
  ，那 p:first-child 就不会生效
• 想确保选中“第一个 p”，不管它是不是整个父元素的第一个子节点？那就得用 :first-of-type

对比 :first-child 和 :first-of-type

两者容易混淆，关键区别在匹配逻辑：

• :first-child → “我是我爹的第一个孩子”（位置第一）
• :first-of-type → “我是我爹第一个出生的同姓娃”（同类型中排第一）

比如： A

B

C

p:first-child 不生效（p 不是第一个子元素）；
p:first-of-type 会选中“B”（它是第一个 p）。

实用小技巧

如果目标是“仅样式化第一个出现的某类元素”，优先考虑 :first-of-type；
如果明确要求“必须是父元素最开头那个子元素”，才用 :first-child。

另外，现代项目中也可配合 :nth-child(1) 使用，效果等同于 :first-child，语义更直白。

基本上就这些。