推荐用 tailwind 内置 odd/even 变体实现斑马纹，如 odd:bg-gray-50 even:bg-gray-100；需确保 tr 是 tbody 的直接子元素，避免条件渲染干扰序号；支持 dark mode 和 tree-shaking，禁用手写 nth-child。
用 odd 和 even 变体直接写斑马纹，别碰 :nth-child()
Tailwind 默认就支持表格行的奇偶样式，odd:bg-gray-50 和 even:bg-gray-100 是最轻量、最可靠的方式。它本质是生成带 :nth-child(odd) 的 CSS 规则，但你完全不用手写选择器，也不用担心伪类优先级打架。
常见错误是手动加 class="odd:bg-gray-50" 到 <tr> 上——这没用，因为 <code>odd 是变体，只对父容器下“真正第奇数个子元素”生效，必须作用在 <tr> 自身，且父容器（比如 <code><tbody>）不能有其他干扰子节点（如注释、空格文本节点在某些渲染模式下也可能干扰）。<ul><li>确保 <code><tr> 是 <code><tbody> 的**直接子元素**，中间不要插 <code><div> 或条件渲染残留的空节点<li>如果用了 React/Vue，检查是否因条件渲染（如 <code>v-if 或 && 表达式）导致部分 <tr> 被跳过，破坏了自然序号<li>不要给 <code><thead> 或 <code><tfoot> 的 <code><tr> 加 <code>odd/even，它们不参与 tbody 内的计数
为什么不用自定义 :nth-child(2n+1) 类？
有人会新建一个 tw-zebra-odd 类，里面写 tr:nth-child(2n+1) { background-color: #f9fafb; }。这看似灵活，实则埋雷：
- Tailwind 的
odd变体自动加了!important（可配），而手写 CSS 没这层保护，容易被组件库或重置样式覆盖 - 手写选择器无法响应 dark mode 变体，比如
dark:odd:bg-gray-800会失效 - 打包时 Tailwind 能 tree-shake 未使用的
odd规则；手写 CSS 则永远在 bundle 里
示例对比：
<!-- ✅ 推荐：原生变体，支持暗色模式 --> <tr class="odd:bg-gray-50 even:bg-gray-100 dark:odd:bg-gray-800 dark:even:bg-gray-750"><pre class="brush:php;toolbar:false;"><!-- ❌ 不推荐：手写 nth-child，不响应变体，易被覆盖 --> <tr class="tw-zebra-odd"> <h3>表头固定 + 斑马纹同时存在时的错位问题</h3> <p>当用 <code>sticky</code> 固定表头（<code>thead</code>），又对 <code>tbody tr</code> 用 <code>odd/even</code>，滚动后视觉上可能发现斑马纹“断层”——这是因为 <code>thead</code> 被提到了新层，但 <code>tbody tr</code> 的 <code>nth-child</code> 计数仍从 1 开始，和视觉位置脱节。</p> <ul><li>解决办法不是改计数逻辑，而是让斑马纹**只作用于可见区域内的 tbody 行**：把 <code>odd</code>/<code>even</code> 移到 <code><tbody> 上，再用子选择器限定<li>正确写法：<code><tbody class="odd:>tr:bg-gray-50 even:>tr:bg-gray-100"><li>这样每组 <code><tbody>（比如分页后重新渲染的块）都独立计数，避免跨块错位<h3>移动端小屏下斑马纹要不要关？</h3> <p>小屏表格常横向滚动，行高压缩，斑马纹反而增加视觉噪音，降低可读性。Tailwind 支持响应式变体，但 <code>sm:odd:bg-transparent</code> 这种写法无效——<code>odd</code> 是伪类变体，不支持断点前缀。</p> <ul> <li>正确做法是用媒体查询包裹，或借助 <code>@layer</code> 在 CSS 中覆盖</li> <li>更简单的是：用 <code>md:odd:bg-gray-50 md:even:bg-gray-100</code>，即默认关闭，仅中屏及以上开启</li> <li>注意：这要求你在 <code>tailwind.config.js</code> 的 <code>theme.extend.screens</code> 里确认 <code>md</code> 起始值符合你的设计断点（默认是 768px）</li> </ul> <p>斑马纹不是必须项，它的价值在于长表格快速定位行，一旦行数少于 10 或列被折叠，视觉引导意义就大幅下降。别为了“完整”硬加。</p> </tbody></code> </li></tbody></code> </li> </tbody></code> </li></ul> </tr>
