nth-child()是为Grid项目添加斑马纹唯一可靠、纯CSS、兼容现代浏览器的方案；它按DOM顺序而非视觉网格位置选择元素，需注意grid-auto-flow方向与内容结构对效果的影响。
用 nth-child() 给 Grid 项目加斑马纹最直接
Grid 容器本身不提供“隔行着色”语义，nth-child() 是唯一可靠、无需 JS、兼容所有现代浏览器的方案。它作用于 grid item（即 display: grid 的直接子元素），不是“行”或“列”，所以你要明确：斑马纹是按 DOM 顺序交替，不是按视觉网格位置。
常见错误是以为 .grid > div:nth-child(odd) 会选中每行第一个格子——其实它只选 DOM 中第 1、3、5… 个子元素，和你在页面上看到的“第一列”完全无关。如果你的 HTML 是竖向铺开（比如 grid-template-columns: repeat(3, 1fr) + grid-auto-flow: row），那 DOM 顺序 ≈ 视觉顺序，此时 nth-child(odd) 才能实现“奇数行首格+偶数行中间格”这类预期效果；但一旦改成 grid-auto-flow: column 或手动指定 grid-area，顺序就彻底乱了。
- 推荐写法：
.grid-item:nth-child(odd) { background-color: #f9f9f9; } - 如果需要严格按“视觉行”着色（比如每行 4 个 item，想让第 1–4 个中第 1、3 个亮，第 5–8 个中第 5、7 个亮），必须配合
grid-column-start计算或 JS 动态打标，纯 CSS 无解 - 注意
:nth-child()从 1 开始计数，even对应 2、4、6…，odd对应 1、3、5…
用 linear-gradient 背景图模拟“行级”斑马纹（仅限单行高文本类内容）
这个技巧本质是把条纹“画”在容器背景上，靠 background-size 和 line-height 对齐，适用于 grid 容器里每个 item 都是等高、纯文本、且高度由 line-height 主导的场景（比如日志列表、代码片段预览区）。它不依赖 DOM 顺序，也不管 grid flow 方向，但对 item 内容结构敏感。
典型失败场景：item 里有图标、按钮、多行文字混排，或设置了 padding/border 导致实际高度 ≠ line-height × 行数。此时背景条纹会错位，甚至完全看不见。
立即学习“前端免费学习笔记（深入）”；
- 核心样式：
background-image: linear-gradient(rgba(0,0,0,.05) 50%, transparent 0); background-size: 100% calc(2 * 1.5em); background-origin: content-box;（假设line-height: 1.5em） -
background-origin: content-box必须加，否则 padding 会把条纹撑偏 - 不能和
background-color同时设为不透明色，否则渐变会被盖住；建议用带透明度的叠加层
为什么不用 grid-row 或 grid-column 伪类？
CSS 标准里根本不存在 :nth-row() 或 :nth-column() 这类选择器。所有“基于网格位置着色”的尝试，比如用 [style*="grid-row"] 属性选择器，都是不可靠的 hack：它依赖内联 style、会被框架动态覆盖、无法响应 resize 重排、且在 SSR 渲染中可能失效。
有人试过用 @container 查询结合 nth-child 做条件判断，目前浏览器支持极差（Chrome 125+ 仅实验性开启），而且 container query 本身只响应容器尺寸，不感知 grid track 数量或 item 位置。
- 结论：别绕弯，
nth-child()是当前唯一实用方案 - 如果业务强依赖“视觉行号”，应在 JS 层生成 class（如
row-1、row-2），再用 CSS 匹配 - 避免用
grid-area名称做选择器（如[grid-area="item-1"]），CSS 选择器无法读取grid-area值
深色模式下斑马纹颜色容易翻车
很多人只在 :root 里定义一套变量，比如 --zebra-light: #f9f9f9;，然后在深色模式媒体查询里只改 background-color，却忘了同步更新斑马纹色值。结果就是深色背景下，#f9f9f9 变成刺眼白条，而 transparent 部分又太灰，对比度崩坏。
- 正确做法：为斑马纹单独定义两套变量，例如
--zebra-bg-odd和--zebra-bg-even，并在媒体查询中一并覆盖 - 更稳妥的是用
color-scheme: light dark+prefers-color-scheme双保险 - 检查 WCAG 对比度：斑马纹色与主背景色之间至少要 1.5:1，否则残障用户根本看不出差异
Grid 斑马纹真正难的不是怎么写，而是怎么定义“哪一行该是什么色”。DOM 顺序、grid flow、内容高度、响应式断点、深色模式切换——这些变量一叠加，nth-child() 就成了最诚实也最脆弱的工具。你得先理清视觉逻辑，再决定是用 CSS 硬扛，还是让 JS 在合适时机注入语义化 class。
