最直接方案是用 tbody tr:nth-child(odd) 为奇数数据行设背景色，避免受表头干扰；兼容IE9+，无需JS；进阶可用 background-image 渐变或CSS变量配合 :is() 实现主题切换与结构适配。
用 nth-child(odd) 给表格行加斑马纹最直接
浏览器原生支持，不用 JS，兼容性好（IE9+），核心就是给奇数行或偶数行统一设背景色。关键不是“隔行变色”这个说法，而是准确选中 <tr> 元素——注意别误选 <td> 或漏掉表头。
常见错误是写成 tr:nth-child(2n) 却发现第一行也被染色了：这是因为 nth-child 是按父元素所有子元素排序的，如果 <thead> 里有 <tr>，它就算第 1 个子元素，后面 <tbody> 里的第一行就是第 2 个，会被 2n 匹配到。所以更稳妥的是限定范围：
- 只给 tbody 里的行加样式：
tbody tr:nth-child(odd) { background-color: #f5f5f5; } - 或者用
tbody tr:nth-of-type(odd)，它只算<tr>类型，忽略<thead>、<th>等干扰 - 如果表格没分
<thead>/<tbody>，直接用tr:not(:first-child):nth-child(odd)跳过首行（常为表头）
background-image 方案适合需要精确控制条纹宽度或颜色过渡
当纯色背景不够用，比如要实现 1px 灰线 + 2px 白底交替、或浅灰渐变条纹，background-image 比反复写多层 nth-child 更可控。本质是用线性渐变画出重复条纹图案。
示例（每 40px 高度一个条纹单元，前 20px 浅灰，后 20px 白）：
立即学习“前端免费学习笔记（深入）”；
tr {
background-image: linear-gradient(
to bottom,
#f0f0f0 0,
#f0f0f0 20px,
#fff 20px,
#fff 40px
);
background-size: 100% 40px;
}
注意点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
background-size必须显式设置，否则默认铺满整个<tr>，看不到重复效果 - 高度值（如
40px）需和实际行高匹配，否则条纹错位；建议配合line-height或height固定行高 - 该方案对
<tr>的display值敏感，若被设为flex或grid，背景图可能失效
用 CSS 变量动态切换斑马纹主题时，:is() 能简化选择器
当页面支持亮/暗主题，且斑马纹颜色需随主题变化，硬编码颜色值会增加维护成本。把颜色抽成 CSS 变量后，选择器逻辑不能变复杂——尤其要避免为每个主题重复写一长串 nth-child。
推荐写法：
:root {
--zebra-light: #f9f9f9;
--zebra-dark: #2d2d2d;
}
tbody tr:is(:nth-child(odd), :nth-of-type(odd)) {
background-color: var(--zebra-light);
}
[data-theme="dark"] tbody tr:is(:nth-child(odd), :nth-of-type(odd)) {
background-color: var(--zebra-dark);
}
这里 :is() 把两种选择逻辑包在一起，既覆盖无 <thead> 的简单表格，也兼容带结构的表格，不用拆成两个规则。注意 IE 不支持 :is()，如需兼容得回退到分开写。
固定表头滚动时斑马纹断裂？position: sticky 行要单独处理
给 <thead> tr 加 position: sticky 实现滚动锁定后，<tbody> 的 nth-child 计数不受影响，但视觉上表头“浮”在上面，导致第一行数据看起来和表头颜色一样，破坏斑马节奏。
解决思路不是改计数，而是让表头脱离斑马纹体系：
- 给
thead tr显式设置独立背景：thead tr { background-color: #fff; } - 确保
tbody tr:nth-child(odd)从第一行数据开始生效（即<tbody>内第一个<tr>是nth-child(1)） - 如果用了
background-image方案，表头必须设background-color覆盖掉渐变，否则会透出条纹
斑马纹本身很简单，难的是在真实项目里应付各种表格结构、主题切换、滚动交互带来的视觉断裂——这些地方不加测试很容易上线才发现第一眼就不对。
