:last-child 伪类用于选中父元素的最后一个子元素，常用于去除列表最后一项的边框、调整样式，如 .list-item:last-child { border-bottom: none; }，也可改变颜色、背景或结合 flex 布局取消右边距，提升布局美观与维护性。
在CSS中，:last-child 伪类用于选中父元素下的最后一个子元素。这个选择器非常实用，尤其在处理列表、导航菜单或卡片布局时，能轻松实现对最后一项的样式定制，比如去除多余的边框、调整背景色或文字颜色。
使用 :last-child 去除最后一项的边框
常见布局中，多个相邻元素之间会用边框分隔，例如垂直列表项之间加 border-bottom。但最后一项通常不需要底部边框，避免视觉上的多余线条。
示例代码：
.list-item {
border-bottom: 1px solid #ddd;
padding: 10px 0;
}
.list-item:last-child {
border-bottom: none;
}
这样，所有 .list-item 都有下边框，唯独最后一个被移除，整体更整洁。
立即学习“前端免费学习笔记（深入）”；
改变最后一项的文字或背景颜色
有时需要突出显示列表的最后一项，比如“查看更多”或特殊提示，可以通过 :last-child 单独设置颜色样式。
示例：
.menu-item {
color: #333;
}
.menu-item:last-child {
color: #007bff;
font-weight: bold;
background-color: #f5f5f5;
}
这个方法适用于导航栏、选项列表等场景，让末尾项更具可读性或引导作用。
结合其他选择器实现更精确控制
:last-child 不仅限于直接子元素，也可与其他选择器组合使用，提升灵活性。
比如只对特定类型的标签应用样式：
ul li:last-child {
color: green;
}
这表示：只有当 li 是其父元素的最后一个子元素时才生效。注意：如果后面还有其他元素（如 <p>），则不会匹配。
另外，若想确保即使后面有空元素也不影响，可考虑使用 :last-of-type 替代，它只看同类型标签的最后一个。
实际应用场景举例
- 分页导航中高亮“最后一页”按钮
- 商品列表中为最后一项添加促销标识
- 表单分组时，去掉最后一个输入项的下划线
- 横向 flex 布局中，取消最后一项的右边距
例如 flex 项目间加间距，但最后一项不加：
.flex-container {
display: flex;
}
.flex-item {
margin-right: 20px;
}
.flex-item:last-child {
margin-right: 0;
}
基本上就这些。合理使用 :last-child 能减少HTML中冗余的类名，让样式更简洁、维护更方便。关键是理解它基于“兄弟元素中的位置”来判断，不是按类或内容筛选。掌握这点，就能精准控制末尾项的视觉表现。
