:nth-child在Grid中“失效”是因为它按DOM子元素顺序计数，而非视觉行列位置；即使grid-column或grid-row改变渲染位置，序号仍固定，导致样式错位。
为什么 :nth-child 在 Grid 布局里经常“失效”？
因为 :nth-child 选中的是 DOM 树中的兄弟元素顺序，不是网格容器内视觉上的行列位置。Grid 项即使被 grid-row 或 grid-column 移动了位置，它在 HTML 中的顺序没变，:nth-child(2) 永远匹配第二个子元素，不管它被渲染在第几行第几列。
常见错误现象：div:nth-child(3) 本想高亮第三列首行，结果高亮了 HTML 里第三个 div——它可能被 grid-column: 5 推到最右边，甚至跨行显示。
- 使用场景：需要按 HTML 结构顺序样式化（比如前三个卡片加边框），而非按网格坐标
- 若真要按“第 2 行第 3 列”设样式，得用
grid-area配合类名，或 JS 计算后加 data 属性 - 性能无额外开销，但语义和预期容易错位
:nth-child 在显式 Grid 中能做什么？
它仍可用于批量控制结构规律明显的子项，比如每行固定 4 项时，给每行最后一项加右 margin：
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.grid > div:nth-child(4n) {
margin-right: 0;
}
关键点在于：这个“每 4 个”必须严格对应你写的 repeat(4, ...) 列数，且子元素未被 span 或 grid-column 打乱自然流顺序。
立即学习“前端免费学习笔记（深入）”；
- 参数差异：
4n+1匹配第 1、5、9… 个元素（即每行第一个）；4n匹配第 4、8、12… 个（每行最后一个） - 如果用了
grid-auto-flow: dense且有跨行项，:nth-child会跳过空缺位置继续计数，结果更难预测 - 兼容性没问题，所有现代浏览器都支持
想按行列坐标样式化？绕过 :nth-child 的实际方案
纯 CSS 没有 :nth-row(2):nth-col(3) 这种伪类。真实项目中更可靠的做法是：
- 给关键单元格加明确类名，如
<div class="row-2 col-3">，再写.row-2.col-3 { background: red; } - 用
data-row和data-col属性配合属性选择器：[data-row="2"][data-col="3"] - 如果 Grid 是 JS 动态生成的，在插入时直接计算并设置
style，避免样式层复杂化 - CSS 自定义属性 +
:has()尚未普及（Chrome 125+ 支持有限），不建议当前生产环境依赖
容易被忽略的 Grid 渲染细节
Grid 容器的 grid-auto-rows 和 grid-auto-columns 不影响 :nth-child 计数，但会影响视觉布局是否“对齐预期”。比如设置了 grid-auto-rows: 100px 却忘了给某些项设 grid-row，它们会挤在第一行，此时 :nth-child(5) 看起来像在第二行——其实只是被撑开了高度，DOM 顺序仍是第五个。
真正危险的是混用 grid-template-areas 和 :nth-child：命名区域本身不改变子元素顺序，但人眼会误以为“header 区域里的元素就该被 header 相关选择器匹配”，而实际上它还是得靠原始位置。
