最直接方案是用 tbody tr:nth-child(odd) 为奇数数据行设背景色，避免受表头干扰；兼容ie9+，无需js；进阶可用 background-image 渐变或css变量配合 :is() 实现主题切换与结构适配。

用 nth-child(odd) 给表格行加斑马纹最直接

浏览器原生支持，不用 JS，兼容性好（IE9+），核心就是给奇数行或偶数行统一设背景色。关键不是“隔行变色”这个说法，而是准确选中 <tr> 元素——注意别误选 <code><td> 或漏掉表头。 <p>常见错误是写成 <code>tr:nth-child(2n) 却发现第一行也被染色了：这是因为 nth-child 是按父元素所有子元素排序的，如果 <thead> 里有 <code><tr>，它就算第 1 个子元素，后面 <code><tbody> 里的第一行就是第 2 个，会被 <code>2n 匹配到。所以更稳妥的是限定范围：

• 只给 tbody 里的行加样式：tbody tr:nth-child(odd) { background-color: #f5f5f5; }
• 或者用 tbody tr:nth-of-type(odd)，它只算 <tr> 类型，忽略 <code><thead>、<code><th> 等干扰 <li>如果表格没分 <code><thead>/</thead> <tbody>，直接用 <code>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;
  }

  注意点：

  • background-size 必须显式设置，否则默认铺满整个 <tr>，看不到重复效果 <li>高度值（如 <code>40px）需和实际行高匹配，否则条纹错位；建议配合 line-height 或 height 固定行高
  • 该方案对 <tr> 的 <code>display 值敏感，若被设为 flex 或 grid，背景图可能失效

    用 CSS 变量动态切换斑马纹主题时，:is() 能简化选择器

    当页面支持亮/暗主题，且斑马纹颜色需随主题变化，硬编码颜色值会增加维护成本。把颜色抽成 CSS 变量后，选择器逻辑不能变复杂——尤其要避免为每个主题重复写一长串 nth-child。

    

    html-to-pptx-converter

    使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

    下载

    推荐写法：

    :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 不支持 <code>:is()，如需兼容得回退到分开写。

    固定表头滚动时斑马纹断裂？position: sticky 行要单独处理

    给 <thead> tr 加 <code>position: sticky 实现滚动锁定后，<tbody> 的 <code>nth-child 计数不受影响，但视觉上表头“浮”在上面，导致第一行数据看起来和表头颜色一样，破坏斑马节奏。

    解决思路不是改计数，而是让表头脱离斑马纹体系：

    • 给 thead tr 显式设置独立背景：thead tr { background-color: #fff; }
    • 确保 tbody tr:nth-child(odd) 从第一行数据开始生效（即 <tbody> 内第一个 <code><tr> 是 <code>nth-child(1)）
    • 如果用了 background-image 方案，表头必须设 background-color 覆盖掉渐变，否则会透出条纹

    斑马纹本身很简单，难的是在真实项目里应付各种表格结构、主题切换、滚动交互带来的视觉断裂——这些地方不加测试很容易上线才发现第一眼就不对。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！