如何在CSS中使用:first-child选择器_选中第一个子元素应用样式

:first-child 伪类选择器用于选中父元素下首个子元素，且需符合指定标签条件，如 ul li:first-child 可为列表首项设置样式；它仅依据位置判断，若第一个子元素不匹配标签类型则失效，例如 p:first-child 在 h2 后的 p 元素上不生效；相比之下，p:first-of-type 不受位置限制，只要求是该类型首个元素；常用于去除评论列表顶部边框、设置首段缩进等场景，使用时需注意 HTML 结构对匹配结果的影响。

:first-child 是CSS中的一个伪类选择器，用来选中父元素下的第一个子元素，前提是该元素满足选择器的条件。我们可以利用它为列表、段落、表格等结构中的首个子元素单独设置样式。

基本语法与使用方式

使用 :first-child 的格式如下：

它会匹配作为其父元素的第一个子元素且符合前面选择器条件的元素。

例如，为无序列表中第一个 li 添加红色文字：

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

这样只有第一个 <li> 会被应用红色字体。

常见应用场景

这个选择器在以下情况特别实用：

• 给文章段落的第一个 p 加大字体或首行缩进
• 在导航菜单中为第一个按钮添加外边距或特殊背景
• 去除列表第一项的上边框或分割线，避免多余线条

示例：去掉评论列表顶部多余的边框：

注意事项与常见误区

:first-child 只看位置，不看标签类型。如果父元素的第一个子元素不是目标标签，样式不会生效。

笔魂AI

笔魂AI绘画-在线AI绘画、AI画图、AI设计工具软件

403

查看详情

比如下面这段HTML：

此时 p:first-child 会生效，因为第一个子元素是 p。

但如果改成：

那么 p:first-child 就不会匹配任何元素，因为第一个子元素是 h2，而不是 p。

若只想选中第一个 p，不管位置，就不能用 :first-child，而应考虑结合类名或其他逻辑。

与其他伪类对比

注意区分 :first-child 和 :first-of-type：

• :first-child 要求必须是父元素的第一个子节点
• :first-of-type 只要求是该标签类型中的第一个，不强制位置为第一

在上面有 h2 的例子中，p:first-of-type 仍能选中第一个 p，而 p:first-child 不行。

基本上就这些。掌握 :first-child 能帮你更精准地控制页面布局中的起始元素样式，但要注意结构影响匹配结果。

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