:nth-child(an+b)无法自动实现周期性循环布局，它仅按DOM序号筛选元素，需配合grid-column等样式才能影响布局；其匹配受注释、display:none等节点干扰，列数或响应式变化时公式易失效，可靠用法是结合Grid结构强制跨列。
不能靠 :nth-child(an+b) 自动实现“周期性循环布局”，它只筛选位置，不改变布局结构；真正起作用的是你用它选中后施加的 grid-column、margin 或 flex-basis 等样式。
为什么直接写 :nth-child(3n+1) 无法让元素自动“每三列换行”
浏览器不会因为这个选择器就重排网格或折行——它只是给第 1、4、7… 个子元素打上样式标记。如果父容器里混着 <h2></h2>、注释节点或 display: none 元素，这些都会占用序号，导致匹配错位。
-
:nth-child(3n+1)匹配的是 DOM 中全局第 1、4、7… 个子节点，不是“每行第一个” - Grid 列数从 3 改成 4 后，原来
3n+1选中的元素可能落在第二列，视觉上完全不对齐 - 响应式断点下视觉排列变了，但 DOM 序号没变，公式失效是常态，不是例外
用 :nth-child() 配合 grid-column 实现“满宽 banner 插入”
这是最典型也最可靠的用法：先定义 Grid 结构，再用 :nth-child() 给特定序号项强制跨列。
- 三列 Grid 中，想让第 4、7、10… 项横跨全行：
.grid > :nth-child(3n+4) { grid-column: 1 / -1; } - 列数改为 4 后，必须同步改成
:nth-child(4n+5)，否则第 4 项仍在第一行末尾，不触发换行 - 务必加
grid-auto-flow: dense，否则跨列项后面可能出现空白缝隙 - Chrome DevTools 的 “Computed” 面板里检查
grid-column-end是否真被应用，常被更高优先级规则覆盖
替代方案：什么时候该放弃 :nth-child() 改用 :nth-of-type() 或 JS
当 DOM 不干净（穿插标题、广告、分隔线）或需要响应式动态对齐时，:nth-child() 就不可靠了。
立即学习“前端免费学习笔记（深入）”；
- 只对
<div class="card"> 做样式，而父容器还有 <code><aside></aside>和<hr>？改用.card:nth-of-type(3n+1)，它跳过非div兄弟 - 移动端单列、桌面端三列，还想“每行首项高亮”？
:nth-child(3n+1)在手机上只会命中第 1、4、7… 个——这其实是每三屏才一个。此时应 JS 动态加first-in-row类，或等 Container Queries 普及 -
:nth-child(-n+3)看似能选前三个，但插入新节点后序号全乱，第 3 个可能变成<header></header>，样式直接套错
真正难的不是写出 3n+1 这个公式，而是确认当前 DOM 序号是否稳定、Grid 列数是否固定、响应式切换时有没有人帮你重算公式——这些地方一漏，样式就悄无声息地崩了。
