:nth-child(3n)不可靠因只按dom顺序计数，不识别视觉行尾；响应式列变、换行、干扰节点或隐藏元素均使其误清边距；推荐改用margin-left替代或直接使用gap属性。
别用 :nth-child(3n) 清右边距，它只认 DOM 顺序，不认视觉行尾——多数时候你清的是错列。
为什么 :nth-child(3n) 在多列布局里容易出错
它数的是父容器下第 3、6、9… 个子元素，和“这行有没有换行”“屏幕宽度够不够放三列”完全无关。一旦有以下任一情况，:nth-child(3n) 就会误杀：
- 响应式断点切换列数（比如从 3 列变 2 列）
- 某项内容变长导致 flex wrap 提前换行
- DOM 中混入注释、文本节点或其它标签（如
<!-- comment -->） - 部分元素被
display: none隐藏，但仍在计数序列中
结果就是：本该清右距的末尾项没被清，中间列甚至首列反而被清了——边距错位，布局塌陷。
更可靠的做法：用 margin-left 替代 margin-right
避开“找末尾”这个不可靠任务，改为“给非首项统一加左距”，天然适配任意列数和换行行为：
.item {
width: calc(33.333% - 10px);
}
.item:not(:first-child) {
margin-left: 10px;
}
关键点：
- 新行第一个
.item自动无margin-left，无需判断是否为行首 - flex / grid / float 布局下都有效
- 响应式改列数时，只需调整
width，不用改选择器 - 记得设
box-sizing: border-box，避免边框撑破宽度
现代布局直接用 gap，彻底绕过 margin 手动计算
如果你支持 Chrome 84+、Firefox 63+、Safari 14.1+（IE 已退出主流），gap 是唯一真正解耦“间距”与“元素位置”的方案：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
或 flex 版：
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
gap 的优势：
- 只在格子之间生效，容器边缘零干扰
- 自动适配行列变化，无需媒体查询重写规则
- 不依赖 DOM 顺序，隐藏、注释、不同标签都不影响
- 支持
row-gap/column-gap独立控制
如果必须用 :nth-child，请严格限定前提
仅当满足全部以下条件时，:nth-child(3n) 才可临时用于清右距：
- 容器使用固定列数（如
grid-template-columns: repeat(3, 1fr)或等宽flex） - 所有子项宽度严格一致，且无内容撑宽、无
flex-grow - 父容器未设
flex-wrap: wrap（即强制单行） - DOM 中无干扰节点（纯
.item子元素，无注释/文本/其它标签）
即便如此，也建议搭配 gap 回退方案，比如：
@supports not (gap: 10px) {
.item { margin-right: 10px; }
.item:nth-child(3n) { margin-right: 0; }
}
真正麻烦的从来不是怎么写选择器，而是怎么让选择器不被 DOM 结构、响应式断点、隐藏元素或浏览器差异悄悄绕过去——gap 和 margin-left 是目前最接近“写一次，跑 everywhere”的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
