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

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

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

要选中第一个

元素，可以这样写：ul > li:first-child { color: red; }注意事项父子关系：:first-child必须是直接子元素，不能是嵌套的后代元素。如果使用ul li:first-child，它会选择所有

中的第一个，而不是

的第一个子元素。兼容性：:first-child在大多数现代浏览器中都支持，但在旧版IE（如IE7及更早版本）中不被支持。常见用法高亮第一个列表项设置表格的第一行样式自定义导航栏的第一个链接样式替代方案如果你需要选择第一个子元素但不希望依赖:first-child，可以使用JavaScript或CSS的nth-child(1)选择器： ul > li:nth-child》

，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

: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学习网公众号也会发布文章相关知识，快来关注吧！