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

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

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

基本定义与语法

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

示例：

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

实际应用场景

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

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

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

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

2. 表格样式的优化

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

Alkaid.art

专门为Phtoshop打造的AIGC绘画插件

153

查看详情

3. 表单控件微调

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

常见误区与注意事项

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

举例：

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

但如果结构变为：
<div>
  <h2>标题</h2>
  <p>段落</p>
</div>

那么 p:first-child 将不生效，因为 p 不是第一个子元素。

总结

基本上就这些，掌握它们能让你的 CSS 更加灵活和语义化。

以上就是CSS伪类:first-child与:last-child区别与应用实践的详细内容，更多请关注php中文网其它相关文章！