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

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

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

什么是:first-child伪类？

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

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

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

立即学习“前端免费学习笔记（深入）”；

常见使用场景

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

沉浸式翻译

沉浸式翻译：全网口碑炸裂的双语对照网页翻译插件

205

查看详情

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

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

注意事项与常见误区

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

• 必须是“第一个子元素”，如果父元素的第一个子节点是其他标签（如 h2 或 div），那么即使目标元素是同类中的第一个，也不会被选中
• 它对空格和换行生成的文本节点敏感（在某些情况下会影响匹配）
• 若想选择某一类型元素的首个实例而不严格要求是父元素的第一个子节点，可考虑使用 :first-of-type

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

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

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

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