nth-child的序号始终基于dom物理位置，不随响应式布局变化重算；无论display、换行或媒体查询如何调整，:nth-child(2n)永远匹配第2、4、6…个子元素，而非每行第2个。
nth-child 的序号逻辑不会随响应式变化自动重算
浏览器计算 nth-child(2n) 这类选择器时，只看 DOM 中的**物理位置**（即元素在父容器里的实际子节点序号），和 CSS 是否显示、是否换行、甚至是否被 display: none 隐藏都无关。这意味着：哪怕你用媒体查询把每行从 3 列改成 4 列，div:nth-child(3n) 依然匹配第 3、6、9、12… 个子元素，而不是“每行第 3 个”。这不是 bug，是规范行为。
常见错误现象：
– 在小屏下设 grid-template-columns: repeat(2, 1fr)，想让每行第 2 个 item 加边框，却写了 :nth-child(2n) → 结果所有偶数序号 item 都被选中，包括跨行后的“第 2 行第 1 个”；
– 用 flex-wrap + nth-child(3n) 布局三列，切到手机后变成两列，但样式仍按原序号加在第 3、6、9 个上 → 视觉错位。
真正可行的响应式“每行第 N 个”方案只有两种
要么放弃 nth-child，改用更可控的机制；要么接受它不重算的事实，提前规划 DOM 结构。没有“动态 nth-child”的 CSS 原生解法。
- 用
grid的nth-of-type配合语义化标签（如只对<article></article>计数），但前提是你的每行 item 类型一致且无其他兄弟节点干扰 - 用
grid-column-start显式控制每个 item 的列起始位置，例如给每行第 3 个加grid-column: 3，再配合媒体查询调整该规则的生效范围 - 最稳妥的是 JS 辅助：监听
resize或使用ResizeObserver，根据当前列数重新给元素加 class（如row-3-col-2），再用 class 写样式
为什么不能用 media query 重写 nth-child 选择器
你可以写 @media (max-width: 768px) { .item:nth-child(2n) { … } }，但这只是“在小屏下启用旧规则”，不是“让 nth-child 按新列数重算”。只要 DOM 顺序不变，2n 就永远指第 2、4、6… 个节点。
立即学习“前端免费学习笔记（深入）”；
参数差异很关键：
– :nth-child(3n+1) 匹配 1,4,7,10…（每组第 1 个）
– :nth-of-type(3n+1) 只计同类型标签，跳过 <div> 之间的 <code><span></span> 或文本节点
– :nth-last-child() 从末尾倒数，适合处理“最后一行不足数”的收尾样式，但依然不感知布局断点
实际项目里最省事的折中做法
如果内容结构固定、列数切换不多（比如只在 desktop/phone 两档），直接用 CSS Grid 的线性控制代替 nth-child：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
/* 每行第 2 个：在 2 列模式下，就是所有偶数序号 */
.container > :nth-child(2n) {
border-right: 2px solid #ccc;
}
}
@media (min-width: 769px) {
/* 每行第 3 个：在 3 列模式下，用 3n 匹配 */
.container > :nth-child(3n) {
border-right: 2px solid #ccc;
}
}这要求你明确知道每种断点下的列数，并且能接受“同一套 DOM 序号在不同断点承担不同视觉角色”。一旦列数变成质数（比如 5 列），或需要“每行第 1 个加阴影、第 3 个加边框”这种混合逻辑，就很容易漏匹配——因为 5n+1 和 5n+3 在 DOM 序号上会跳跃，而人眼看到的“每行第 3 个”其实是连续的视觉位置。
