:first-child 伪类选择父元素中第一个子元素，且该子元素需匹配指定选择器。例如 p:first-child 选中作为首个子元素的 p 标签；若首个子元素为其他类型（如 h2），则 p:first-child 不生效，此时可用 p:first-of-type 选中首个 p 类型元素。样式应用需注意子元素实际顺序，:first-child 基于位置而非类型，结合 :first-of-type 更灵活可靠。
使用 CSS 的 :first-child 伪类可以选择父元素中的第一个子元素。只要该子元素匹配选择器，样式就会生效。
基本语法
selector:first-child 表示选中作为其父元素第一个子元素的指定元素。
例如：
-
p:first-child：选中父元素中第一个子元素且是
p的元素。 -
div:first-child：选中父元素中第一个子元素且是
div的元素。
常见用法示例
假设 HTML 结构如下：
立即学习“前端免费学习笔记（深入）”；
这是第一段
这是第二段
这是第三段
你想给第一个 p 元素加粗：
.container p:first-child {
font-weight: bold;
}
这段代码的意思是：在 .container 内，选中第一个子元素并且是 p 的元素，应用加粗样式。
注意事项
:first-child 关注的是“是否为第一个子元素”，而不仅仅是“第一个同类元素”。
比如下面这个结构：
标题
第一段文字
第二段文字
如果你写 p:first-child，不会生效，因为第一个子元素是 h2，不是 p。
要选中第一个 p 元素，可以考虑使用 :first-of-type：
.box p:first-of-type {
color: red;
}
这样即使前面有其他标签，只要是第一个 p 类型，就能被选中。
总结
:first-child 是根据位置来选择的——必须是父元素的第一个子节点，并且符合前面的元素类型选择器。如果不确定子元素顺序，建议结合 :first-of-type 使用更灵活的选择方式。
基本上就这些，不复杂但容易忽略细节。
