CSS中使用:first-child选择器可以选中某个元素的第一个子元素。这个选择器会匹配作为其父元素的第一个子元素的元素。语法：父元素 :first-child { /* 样式代码 */ }示例：假设 HTML 结构如下：

• 第一个列表项
• 第二个列表项
• 第三个列表项

要选中

的第一个
• ，可以这

CSS中的:first-child伪类选择器用于精准定位父元素中第一个子元素（且必须匹配指定标签类型），它基于DOM结构的位置而非元素类型，因此当首个子元素不是目标标签时将失效；文章通过多个HTML实例对比:first-child与:first-of-type的区别，强调其“位置优先”的特性及实际应用中的常见陷阱，并指出结合:first-of-type可提升样式控制的灵活性和可靠性——掌握这一细节，能让CSS选择更准确、更健壮。

使用 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选择器可以选中某个元素的第一个子元素。这个选择器会匹配作为其父元素的第一个子元素的元素。语法：父元素 :first-child { /* 样式代码 */ }示例：假设 HTML 结构如下：

• 第一个列表项
• 第二个列表项
• 第三个列表项

的第一个
• ，可以这样写 CSS：ul > li:first-child { color: red; }注意事项：:first-child 是一个伪类选择器，它匹配的是第一个子元素。它只匹配直接子元素（即使用 > 选择器），而不是所有后代元素。如果省略 >，它会匹配任何层级中的第一个子元素，这可能不是你想要的结果。如果第一个子元素不是你想要的标签（例如，前面有其他标签或文本节点），:first-child 可能不会按预期工作。案例说明：HTML：

  段落1

  段落2

  CSS： div > p:first-child { background-color:》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！