Grid中:nth-child失效因它按DOM序号而非视觉行序计数；表格因tbody语义结构保证顺序，而Grid子元素是“裸”节点，受注释、空格、动态插入等干扰；稳定方案是用display:contents封装逻辑行。
直接用 .grid-item:nth-child(odd) 和 .grid-item:nth-child(even) 就能实现，但前提是子元素顺序与视觉行序一致；一旦插入非目标元素、或用 grid-column 打乱 DOM 顺序，颜色就会错位。
为什么 tr:nth-child(even) 在表格里能用，但 Grid 里容易翻车
因为表格有天然语义结构（tbody 包裹所有数据行），而 Grid 容器的子元素就是“裸”元素——:nth-child() 数的是父容器下所有子节点的位置，不管它们最终被 grid 排到哪一行。
- 如果网格项之间夹着注释、空格文本节点、或一个
<div class="spacer">，<code>:nth-child(2)可能根本不是你想要的那个“第二行” - 用
grid-column: 1 / -1让某个项跨整行，它仍只占一个 DOM 位置，不会影响后续项的:nth-child序号 - 但若你用 JavaScript 动态插入一个
div到中间，所有后续:nth-child(n)都会偏移 —— 这是预期行为，不是 bug
确保交替色准确作用于“逻辑行”的写法
别依赖视觉排列，而是把每“行”显式封装成一个网格项（比如用 .row 包裹一整行内容），再对这个 .row 应用 :nth-child：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.row {
display: contents; /* 让子元素参与网格布局，自身不占流 */
}
.row:nth-child(odd) > * {
background-color: #f9f9f9;
}
.row:nth-child(even) > * {
background-color: #ffffff;
}-
display: contents是关键：它让.row不产生盒模型，但保留 DOM 层级，使选择器路径有效 - 必须用
> *而不是直接给.row设背景，否则背景会被display: contents抹掉 - 这种写法完全绕开 grid 自动填充顺序，只认你写的 HTML 结构顺序，稳定可控
当 Grid 行高不固定、内容高度差异大时怎么办
如果每行内项目高度不同（比如有的带图片、有的纯文字），单纯按 DOM 序号交替会导致视觉上“断层”——某行背景色突然中断、下一行又从头开始。这时不能靠 :nth-child，得换思路：
立即学习“前端免费学习笔记（深入）”；
- 放弃 CSS 自动交替，改用 JS 在渲染后根据
getBoundingClientRect().top分组计算“实际在第几视口行”，再加 class - 或提前约定：每行必须用
grid-row显式声明起始/结束行号，如.item:nth-child(1) { grid-row: 1; }，然后用[grid-row="1"], [grid-row="3"]这类属性选择器（需配合 JS 设置style.gridRow） - 更轻量的替代：用
grid-auto-flow: dense+grid-row: span 2控制节奏，再配合:nth-child(2n)，但仅适用于规律性较强的场景
真正难的不是写对选择器，而是确认「你希望交替的，到底是 DOM 顺序、视觉行序，还是业务逻辑中的‘第 N 条记录’」——这三者在 Grid 中常常不重合，选错前提，样式就永远差那么一点。
