:first-child是CSS伪类，匹配父元素下第一个子元素且标签名与选择器一致；它按位置匹配，而非类型，若首个子元素非目标标签则不生效。
想只选中父容器下的第一个子元素，用 :first-child 最直接。
什么是 :first-child？
它是一个CSS伪类，匹配**父元素下第一个子元素**，且该子元素的标签名要和选择器一致。注意：它看的是“位置”，不是“类型”——哪怕前面有其他标签，只要它是第一个子元素，就可能被选中。
常见写法和注意事项
基本语法：selector:first-child
- 例如
p:first-child只会选中作为父元素第一个子节点的<p></p>元素 - 如果父元素第一个子节点是
<h2></h2>，那p:first-child就不会生效 - 想确保选中“第一个
p”，不管它是不是整个父元素的第一个子节点？那就得用:first-of-type
对比 :first-child 和 :first-of-type
两者容易混淆，关键区别在匹配逻辑：
立即学习“前端免费学习笔记（深入）”；
-
:first-child→ “我是我爹的第一个孩子”（位置第一） -
:first-of-type→ “我是我爹第一个出生的同姓娃”（同类型中排第一）
比如：<div>
<span>A</span><p>B</p>
<p>C</p>
</div>p:first-child 不生效（p 不是第一个子元素）；p:first-of-type 会选中“B”（它是第一个 p）。
实用小技巧
如果目标是“仅样式化第一个出现的某类元素”，优先考虑 :first-of-type；
如果明确要求“必须是父元素最开头那个子元素”，才用 :first-child。
另外，现代项目中也可配合 :nth-child(1) 使用，效果等同于 :first-child，语义更直白。
基本上就这些。
