:nth-child(An+B)匹配位置满足position=A×n+B（n≥0的整数）的元素，按父元素所有子元素总序号计算，无视类型、display:none或视觉顺序。
理解 :nth-child(An+B) 的真实匹配逻辑
它不按“每第 A 个”直觉工作，而是匹配位置满足 n ∈ ℤ, n ≥ 0 且 position = A×n + B 的元素。比如 :nth-child(3n+2) 匹配第 2、5、8、11… 个子元素——不是“从第 2 个起每 3 个选一个”，而是“所有位置模 3 余 2 的元素”。这点常被误读，导致网格错位。
关键约束：它只看父元素下的**所有子元素顺序位置**，不管类型或是否被 display: none 排除（但 visibility: hidden 不影响）。若父容器混有文本节点、注释或 <div> <p> 等不同标签，:nth-child 仍按总序号计数。
用 :nth-child(4n+1) 和 :nth-child(4n+4) 控制 4 列网格首尾样式
常见需求：4 列网格中，第一列左对齐、最后一列右对齐、中间列居中，同时避免外边距溢出。不能只靠 margin-left 累加，得精准锚定。
-
:nth-child(4n+1)→ 第 1、5、9… 个元素（每行首项），可设margin-left: 0 -
:nth-child(4n+4)→ 第 4、8、12… 个元素（每行末项），可设margin-right: 0 - 中间两项（
:nth-child(4n+2),:nth-child(4n+3)）保持默认间距
注意：若网格项数量不是 4 的倍数，最后一行末项可能不匹配 4n+4（比如共 10 项，最后一项是第 10 个 → 10 % 4 = 2，匹配 4n+2），此时需配合 :nth-last-child 做兜底，否则右边界失控。
立即学习“前端免费学习笔记（深入）”；
避开 :nth-child 在 Flex/Grid 容器中的失效陷阱
当父元素是 display: flex 或 display: grid 时，:nth-child 依然有效——但它匹配的是 DOM 子元素顺序，不是视觉排列顺序。问题出在：Flex 中 order 属性会改变渲染顺序，但不改变 DOM 位置；Grid 中 grid-row/grid-column 可能跨行/跨列，导致“视觉上第 1 列”实际是 DOM 第 7 个子元素。
此时用 :nth-child 控制列样式极易翻车。更稳的做法是：
- 给每列项添加语义类名，如
col-1、col-2，再用类选择器控制 - 改用 CSS Container Queries +
@container配合伪类，适用于响应式列数变化场景 - 纯 Grid 布局下，优先用
grid-column-start和grid-column-end直接定义列范围，而非依赖子元素序号
性能与可维护性：什么时候该放弃 :nth-child
当需要实现“每行第 2 列加阴影，但跳过第 3 行”这类带条件偏移的规则时，:nth-child(An+B) 表达式会迅速膨胀（例如 :nth-child(6n+5):not(:nth-child(n+19))），可读性归零，且无法动态响应数据增删。
真正复杂的网格样式，建议：
- 服务端或 JS 渲染时注入列索引类名，如
data-col="2"，再用属性选择器[data-col="2"] - 使用 CSS 自定义属性传递列信息：
style="--col: 2;"，配合calc()或clamp()动态计算 - 现代项目直接用
display: grid的grid-template-columns和grid-auto-flow，把布局逻辑交给 Grid 而非选择器
过度依赖 :nth-child 实现视觉网格，本质是在用选择器模拟布局系统——它能跑通，但离清晰、可扩展、易调试很远。
