CSS选择第一个子元素的方法是使用伪类选择器:first-child。这个选择器可以匹配某个父元素下的第一个子元素。示例代码：.parent>:first-child{/*样式规则*/}说明：.parent是父元素的类名。>表示直接子元素（不包括更深层次的后代元素）。:first-child匹配的是父元素的第一个子元素，无论其类型是什么（如div、p、span等）。示例HTML：<

CSS中的:first-child伪类用于精准定位父元素中第一个子元素，但前提是该子元素必须同时满足“位置第一”和“类型匹配”两个条件；当首个子元素并非目标类型时（如父容器以标题开头却想样式化首段文字），:first-of-type便成为更可靠的选择——掌握二者差异与协同使用技巧，能让你的样式控制既准确又灵活，避免常见陷阱。

使用 CSS 的 :first-child 伪类可以选择父元素中的第一个子元素。只要该子元素匹配选择器，样式就会生效。

基本语法

selector:first-child 表示选中作为其父元素第一个子元素的指定元素。

例如：

• p:first-child：选中父元素中第一个子元素且是 p 的元素。
• div:first-child：选中父元素中第一个子元素且是 div 的元素。

常见用法示例

假设 HTML 结构如下：

<div class="container">
  <p>这是第一段</p>
  <p>这是第二段</p>
  <p>这是第三段</p>
</div>

你想给第一个 p 元素加粗：

.container p:first-child {
  font-weight: bold;
}

这段代码的意思是：在 .container 内，选中第一个子元素并且是 p 的元素，应用加粗样式。

注意事项

:first-child 关注的是“是否为第一个子元素”，而不仅仅是“第一个同类元素”。

比如下面这个结构：

<div class="box">
  <h2>标题</h2>
  <p>第一段文字</p>
  <p>第二段文字</p>
</div>

如果你写 p:first-child，不会生效，因为第一个子元素是 h2，不是 p。

要选中第一个 p 元素，可以考虑使用 :first-of-type：

.box p:first-of-type {
  color: red;
}

这样即使前面有其他标签，只要是第一个 p 类型，就能被选中。

总结

:first-child 是根据位置来选择的——必须是父元素的第一个子节点，并且符合前面的元素类型选择器。如果不确定子元素顺序，建议结合 :first-of-type 使用更灵活的选择方式。

基本上就这些，不复杂但容易忽略细节。

好了，本文到此结束，带大家了解了《CSS选择第一个子元素的方法是使用伪类选择器:first-child。这个选择器可以匹配某个父元素下的第一个子元素。示例代码：.parent>:first-child{/*样式规则*/}说明：.parent是父元素的类名。>表示直接子元素（不包括更深层次的后代元素）。:first-child匹配的是父元素的第一个子元素，无论其类型是什么（如div、p、span等）。示例HTML：

第一个子元素

第二个子元素