如何在CSS中使用伪类:first-child选择第一个元素_利用:first-child调整首项样式

新闻中心 NEWS CENTER

2025-11-23

浏览次数：次

:first-child伪类用于选中父元素下的首个子元素，如ul li:first-child使列表首项加粗；常见于导航、段落等场景；需注意目标元素必须是父级的第一个子节点，否则需用first-of-type。

如何在css中使用伪类:first-child选择第一个元素_利用:first-child调整首项样式

在CSS中，:first-child 是一个非常实用的伪类选择器，用于选中父元素下的第一个子元素。当你希望为列表、段落或容器中的首个项目设置特殊样式时，这个选择器能帮你精准定位，无需额外添加类名。

:first-child 会匹配某个元素的第一个子元素，前提是该子元素符合指定的标签类型或选择器条件。它不依赖于类名或ID，而是基于元素在父容器中的位置。

例如，你想让无序列表中的第一项文字加粗，可以这样写：

ul li:first-child {
font-weight: bold;
}

这样，只有 <li> 是其父元素（<ul></ul>）的第一个子节点时，样式才会生效。

这个伪类特别适用于以下几种情况：

<li>在导航菜单中突出显示第一个菜单项 <li>为文章段落的第一段增加上边距或字体大小 <li>在图片列表中给首图设置不同的边框或阴影

比如，为文章中每个 section 的第一个段落设置更大的字号：

section p:first-child {
font-size: 1.2em;
color: #333;
}

使用 :first-child 时需要注意几点：

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

:first-of-type

举个例子，下面这段HTML中，p 并不是父元素的第一个子元素：

辅助信息

这是段落

第二个段落

此时 p:first-child 不会匹配任何元素，因为第一个子元素是 <span></span>。应改用 p:first-of-type 才能选中第一个段落。

基本上就这些。掌握 :first-child 能让你更灵活地控制页面结构样式的起点，减少冗余类名，提升代码简洁性。

以上就是如何在CSS中使用伪类:first-child选择第一个元素_利用:first-child调整首项样式的详细内容，更多请关注其它相关文章！