:nth-child无法实现真正的瀑布流差异化布局，因为它仅按DOM顺序选择元素，不感知渲染后的列分布，导致间距错乱、列高不齐、首项不对齐。
不能用 :nth-child 实现真正的瀑布流差异化布局——它根本不知道哪项该出现在哪一列。
为什么 :nth-child 在瀑布流里“选错人”
瀑布流（如 column-count 或 JS Masonry）中，元素的视觉排列顺序和 DOM 顺序不一致。比如你写了 .item:nth-child(3) { margin-top: 20px; }，它只会找 DOM 中第 3 个 .item，但这个元素在渲染后很可能落在第二列底部，甚至第三列中间。结果就是：间距乱、列高不齐、首项对不齐。
-
:nth-child(n)永远按父容器子节点的原始位置计数，不感知渲染后的列分布 - 哪怕你用
:nth-child(3n+1)猜“每列第一个”，只要列数变化或新增/删减 item，立刻失效 - 它无法区分“视觉上第一列的第一个”和“DOM 里第一个”，而瀑布流只认前者
哪些场景下 :nth-child 还能凑合用
仅限于**纯视觉模拟、固定高度、无动态插入**的极简情况，比如静态展示页里用 flex-wrap + 手动设高模拟参差效果：
- 所有
.item高度写死（如.item:nth-child(odd) { height: 120px; }），且不依赖 JS 重排 - 容器用
display: flex; flex-flow: column wrap; height: 600px;，靠高度截断自动换列 - 此时
:nth-child控制的是 DOM 顺序上的“第几个”，恰好和视觉顺序重合——但这是巧合，不是可靠方案
真正可控的替代方案
放弃用 :nth-child 控制间距或位置，改用浏览器原生支持或库级配置：
立即学习“前端免费学习笔记（深入）”；
- 用
column-count时，统一设column-gap: 20px控制列间距离，margin-bottom控制项内垂直间距（只设 bottom，避免上下 margin 折叠干扰） - 用 Masonry / Isotope 等库时，通过
gutter配置项控制间距，CSS 只负责单个.item的宽高、padding 和 border - 想让多列首项视觉对齐？别碰
:first-child，给容器加padding-top: 20px+column-fill: auto - Firefox 支持
grid-template-rows: masonry，此时可用gap，但注意：其他浏览器不支持，且grid-row-end: span 2类 item 会让gap计算异常
最易被忽略的一点：当你发现 :nth-child 设的 margin 在滚动加载新 item 后突然错位，大概率是 JS 布局库读取了你手动写的 inline style 并参与了尺寸计算——这种耦合会让调试变得极其隐晦。
