:last-child在多列布局中失效，因其匹配父容器最后一个子元素而非每行末尾；应改用:nth-child(3n)清除每行最右列右边距，或grid的gap属性、flex的justify-content等更可靠方案。
为什么 :last-child 在多列布局里经常失效
因为 :last-child 匹配的是父容器中「最后一个子元素」，不是「每行最后一列」。当用 float、inline-block 或 grid 实现多列时，HTML 结构仍是线性排列的——比如 12 个 div 挨着写，浏览器不会自动按“第 4 个是第一行末尾”来理解，所以 :last-child 只会命中第 12 个，前 11 个全被忽略。
用 :nth-child() 精确控制每行末尾的间距
假设每行 3 列，就要让第 3、6、9、12… 个元素不设右边距。这比猜哪个是“最后”靠谱得多：
-
:nth-child(3n)匹配所有 3 的倍数位置的元素（即每行最右一列） - 配合
margin-right: 0清除右边距，其他列保持margin-right: 1rem - 注意：如果列数变化（如响应式从 3 列变 2 列），
nth-child(3n)就不再适用，得配合媒体查询重写
/* 3 列布局，清除每行最右一列的右边距 */
.item {
margin-right: 1rem;
}
.item:nth-child(3n) {
margin-right: 0;
}
Grid 布局下更干净的解法：gap 替代手动 margin
用 display: grid 时，根本不需要靠 :last-child 或 :nth-child 去“擦边”，gap 属性天然只在格子之间生效，边缘不留空：
-
gap: 1rem自动处理行列间距，不污染外边距 - 无需额外选择器，也不受 HTML 顺序干扰
- 兼容性已很好（Chrome 66+、Firefox 63+、Safari 16.4+），IE 不支持，但 IE 场景基本可忽略
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
Flex 布局里用 margin 的安全写法
Flex 容易误用 :last-child，尤其当换行（flex-wrap: wrap）后，最后一项未必在末尾视觉位置。稳妥做法是反向操作：
- 给所有子项统一加
margin-right - 再给每行第一个元素加
margin-left: 0（用:nth-child(3n + 1)配合 3 列） - 或者直接用
justify-content: space-between，但要求子项数量刚好填满整行，否则末尾会拉伸 - 避免用
margin-left+:last-child，因为 flex 项顺序可能被order打乱
实际项目里最容易漏掉的，是响应式断点切换时列数变了，但 :nth-child() 的公式没同步更新——比如手机端变成 2 列，却还留着 3n，结果右边距全乱了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
