CSS伪类:first-child与:last-child区别与应用实践-css教程-PHP中文网

CSS伪类:first-child与:last-child区别与应用实践

P粉602998670

发布： 2025-11-21 15:43:17

原创

835人浏览过

:first-child 选中父元素的第一个子元素，:last-child 选中最后一个子元素。两者依据元素在父容器中的顺序位置匹配，常用于列表分隔线、表格样式优化和表单微调。需注意它们不按类型匹配，若首个或末个子元素不符合选择器条件则失效；应使用 :first-of-type 或 :last-of-type 按类型定位。掌握其逻辑可提升 CSS 灵活性与可维护性。

css伪类:first-child与:last-child区别与应用实践

:first-child 和 :last-child 是 CSS 中常用的结构性伪类，用于选中父元素下的第一个或最后一个子元素。它们在样式布局、列表美化、表格设计等场景中非常实用。虽然名称相似，但作用位置和使用细节有明显区别。

基本定义与语法

两者都属于“基于位置”的伪类，依赖于元素在其父容器中的顺序位置。

:first-child：匹配父元素中的第一个子元素，且该子元素必须是指定的标签或满足选择器条件。
:last-child：匹配父元素中的最后一个子元素，同样需满足选择器条件。

示例：

/* 选中列表中的第一项 */
li:first-child { color: red; }

/ 选中列表中的最后一项 /
li:last-child { color: blue; }

实际应用场景

这两个伪类常用于去除默认间距、添加分隔线、控制按钮组样式等。

1. 列表项之间的分隔线处理

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

在水平导航栏或行内列表中，常需要在每项之间加边框，但首项前或末项后不需要。

/ 在每一项左边加边框，去掉第一项的边框 /
.nav li { border-left: 1px solid #ccc; }
.nav li:first-child { border-left: none; }

或者反过来，只给最后一项特殊样式（如提示箭头）：

.breadcrumb span:last-child { font-weight: bold; }

2. 表格样式的优化

对表格的首行或末行设置不同背景色：

tr:first-child td { background-color: #f0f0f0; }
tr:last-child td { border-bottom: 2px solid #333; }

3. 表单控件微调

AI Word

一款强大的 AI 智能内容创作平台，致力于帮助用户高效生成高质量、原创且符合 SEO 规范的各类文章。

226

查看详情

在一组输入框中，取消第一个的上边距或最后一个的下边距：

.input-group input:first-child { margin-top: 0; }
.input-group input:last-child { margin-bottom: 0; }

常见误区与注意事项

使用时需注意选择器的精确性，避免因 DOM 结构变化导致失效。

如果父元素的第一个子节点不是目标标签，:first-child 不会匹配。例如，一个 <p></p> 后面跟着 <div>，则 <code>p:first-child 只有在它是第一个子元素时才生效。
两者都是基于兄弟节点的位置，不关心元素类型是否相同。
若想按类型匹配首个/末个元素，应使用 :first-of-type 或 :last-of-type。

举例：

假设结构为：

段落

第二个段落

此时 p:first-child 能匹配第一个 p，因为它确实是第一个子元素。

但如果结构变为：