斑马纹必须作用于tr元素，写为tr:nth-child(odd)；td:nth-child(odd)产生竖条纹而非行交替；含thead时需用tbody tr:nth-child(odd)或nth-of-type(odd)避免序号错乱。
直接用 :nth-child(odd) 会给所有奇数行加样式，但表格里真正要高亮的是 <tr>，不是 <td> 或 <th> —— 所以必须写在 tr 上，否则无效。
为什么 td:nth-child(odd) 不是斑马纹？
这是最常踩的坑：误以为给单元格加伪类就能实现行交替。实际上 td:nth-child(odd) 选中的是每行中第 1、3、5… 列的单元格，结果是“竖条纹”，不是“横条纹”。斑马纹本质是按行交替，必须作用于 tr 元素本身。
-
tr:nth-child(odd)→ 正确：选中第 1、3、5… 行（即奇数序号的<tr>） -
td:nth-child(odd)→ 错误：选中每行里第 1、3、5… 列的<td> - 如果表格有
<thead>，tr:nth-child(odd)会把表头也计入序号（第 1 行是<th>），可能导致第一行数据被跳过
如何避开 <thead> 干扰？
当表格含表头时，tr:nth-child(odd) 从整个 <table> 的子元素序列计数，<thead><tr></tr></thead> 算作第 1 个 tr，后面的数据行就从第 2 个开始编号，导致偶数行变“奇数”被选中，视觉错乱。
- 稳妥做法：给
<tbody>显式包裹数据行，再写tbody tr:nth-child(odd) - 或用
tbody tr:nth-of-type(odd)（更健壮，只计tr类型，忽略thead中的tr） - 不要依赖
:nth-child(odd)在无tbody的表格里“自动对齐”，浏览器解析差异可能引发不一致
兼容性与性能注意点
:nth-child() 在 IE9+ 完全支持，但 IE8 及更早版本不支持 —— 如果还需兼容 IE8，得用 JS 动态加 class 或服务端渲染 class。
立即学习“前端免费学习笔记（深入）”；
- 性能上完全无需担心：
:nth-child()是 CSS 引擎原生处理，比 JS 遍历tr快得多 - 别和
:nth-of-type()混用：前者按 DOM 位置序号，后者按同类型兄弟节点序号；对纯tr子元素二者效果相同，但一旦中间插入注释、空格文本节点，:nth-child()就会失效，:nth-of-type()更鲁棒 - 如果表格动态增删行，CSS 伪类会自动生效，无需额外 JS 绑定
真正容易被忽略的是 <thead> 和 <tbody> 的结构语义 —— 很多人直接写 <table><tr><th>...</tr><tr><td>...</tr></table>，没包 <tbody>，这时候 :nth-child(odd) 行为就取决于浏览器是否自动补全、怎么补全，结果不可控。
