CSS中:first-child选择器用法详解

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《CSS中使用:first-child选择器可以选中某个父元素下的第一个子元素。以下是详细说明和示例：语法父元素 > 子元素:first-child { /* 样式代码 */ }示例假设HTML结构如下：

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

: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 结构如下：

<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选择器用法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！