使用:last-child可解决列表末尾多余margin问题，通过为最后一个子元素设置margin为0或使用:not(:last-child)仅对非末项添加间距，结合Flexbox的gap属性也可避免此问题。
在使用 CSS 布局时，经常会遇到为列表项或子元素设置 margin 后，最后一个元素多出多余间距的问题。这时候结合伪类 :last-child 可以有效解决布局错位的情况。
问题场景：多余的底部或右侧 margin
假设你有一组并排排列的按钮或垂直堆叠的卡片，每个元素都设置了 margin-bottom 或 margin-right，但最后一个元素后面并不需要留空。
例如：
div { margin-bottom: 16px; }如果父容器中有 5 个 div，那么最后一个也会有 16px 的下边距，可能导致整体内容与下方元素距离过大。
立即学习“前端免费学习笔记（深入）”；
使用 :last-child 去除多余 margin
:last-child 是一个结构伪类，用于选中父元素中的最后一个子元素。通过它，可以专门针对最后一个元素重置 margin。
常见写法：
.container > * { margin-bottom: 16px; }.container > :last-child { margin-bottom: 0; }
这段代码的意思是：容器内的所有直接子元素都添加下边距，但最后一个子元素的下边距设为 0。
替代方案与注意事项
除了 :last-child，也可以考虑以下方式：
- 使用 :not(:last-child) 直接只为非最后一个元素添加 margin：
.item:not(:last-child) { margin-bottom: 16px; } - 在 Flexbox 布局中，可用 gap 属性代替 margin，自动避免边缘间距问题： .container {
display: flex;
flex-direction: column;
gap: 16px;
}
注意：:last-child 要求目标元素必须是其父元素的最后一个子节点。如果后面还有其他元素（如文本、注释或隐藏元素），可能无法正确匹配。
基本上就这些。合理使用 :last-child 配合 margin 调整，能让你的布局更干净、可控。不复杂但容易忽略。
