使用 :last-child 可精准控制最后一个子元素样式，1. 消除列表多余分隔线；2. 避免底部外边距空白；3. 控制特定元素样式如段落；4. 配合 Flex 或 Grid 布局调整对齐，提升布局简洁性与可维护性。

使用 :last-child 选择器可以精准控制列表或容器中最后一个子元素的样式，避免不必要的空白、边距错位或分割线冗余问题，从而优化整体布局。

消除多余的分隔线

在列表项之间添加分隔线时，最后一个元素后面通常不需要线条。通过 :last-child 可以轻松移除它。

ul li { border-bottom: 1px solid #ccc; padding: 10px 0; } ul li:last-child { border-bottom: none; }

这样每个

li

都有下边框，只有最后一个被取消，视觉更干净。

调整间距避免底部留白

当子元素使用

margin-bottom

时，容器底部可能产生多余空白。用 :last-child 去除最后一项的外边距可改善布局紧凑性。

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

.item { margin-bottom: 20px; } .item:last-child { margin-bottom: 0; }

特别适用于卡片、文章列表等垂直排列内容。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

针对特定类型元素精确控制

:last-child 不仅限于同标签类型，只要目标是父容器中的最后一个子元素即可生效。例如，一段文字中最后一个段落需要不同样式：

article p:last-child { color: #666; font-style: italic; }

可用于强调结尾语或设置收尾段落的视觉层次。

与 Flex 或 Grid 布局配合使用

在弹性或网格布局中，有时需对末尾项做特殊处理，比如隐藏占位或调整对齐方式。

.flex-container { display: flex; gap: 10px; } .flex-container > *:last-child { margin-left: auto; /* 将最后一项推到最右边 */ }

这种技巧适合工具栏或操作按钮组的排版微调。

基本上就这些。合理使用 :last-child 能减少 HTML 类名依赖，提升样式的可维护性，让布局更简洁自然。