odd:在表格中失效的根本原因是其依赖tbody内tr必须为连续直系子元素，若存在注释、文本节点、wrapper或组件库额外DOM层，nth-child计数即中断。
odd: 和 even: 是 Tailwind 提供的最直接方式，但它们只对父容器的**直系子元素**生效 —— 表格里如果用了 tbody 包裹 tr，而你把 odd:bg-gray-50 写在 tr 上，大概率不生效。
为什么 odd: 在表格里经常失效？
根本原因不是表格本身，而是 DOM 层级被干扰：
-
tbody是table的子元素，tr是tbody的子元素 —— 所以odd:必须作用于tbody的直系子节点（即tr），且tbody里不能有注释、空文本、或额外 wrapper 元素 - React/Vue 中常见写法：
<tbody>{rows.map(...)}</tbody>，只要map返回的是单个<tr>，就满足条件；但如果返回了 <code><fragment></fragment>或带<div> 的 wrapper，<code>odd:就断了 - 浏览器会把换行符、缩进空格解析为文本节点，插在
tr之间，也会让nth-child计数错位
正确写法：确保层级干净 + 显式作用于 tr
假设你的 HTML 结构是标准的：
<table class="w-full">
<thead><tr><th>Name</th></tr></thead>
<tbody>
<tr class="odd:bg-white even:bg-gray-50"><td>Alice</td></tr>
<tr class="odd:bg-white even:bg-gray-50"><td>Bob</td></tr>
</tbody>
</table>
关键点：
立即学习“前端免费学习笔记（深入）”；
- 把
odd:/even:类直接加在tr元素上，而不是tbody或table - 确保
tbody内部只有tr，没有多余标签、注释或空白文本节点（开发时可检查 Elements 面板） - 如果用的是 Ant Design、Element Plus 等组件库，它们常在
tr外套一层div或用虚拟滚动，此时odd:必然失效，得换方案
遇到嵌套展开行（如 antd table）怎么办？
原生 odd: 无法跳过非目标行计数，这时候必须放弃结构性伪类，改用类名控制：
- 给顶层行加
class="level-0"，子级行加class="level-1"等 - 用 CSS
:nth-child(An+B of .level-0)（CSS 4 新语法，Chrome 125+ / Safari 17.4+ 支持）精确筛选目标行 - 或者退一步：用 JS 动态加
data-odd属性，在 CSS 里写[data-odd] { background: #fff; } - Tailwind 默认不支持
of S语法，需手动写 CSS 或用插件扩展
真正卡住的地方往往不是语法不会写，而是没意识到 odd: 的“兄弟关系”有多脆弱 —— 一个看不见的换行符、一次无意识的 Fragment 包裹，就能让整套斑马纹失效。先 inspect 元素确认 tr 确实是 tbody 的连续直系子节点，再动手加类。
