:nth-child(odd)不生效是因为它按父元素所有子元素的物理位置计数，而非仅标签；若表格含或非节点，序号即错位，应改用tbody tr:nth-of-type(odd)确保按类型计数。
为什么 :nth-child(odd) 有时不生效？
常见现象是给 <tr> 写了 <code>tr:nth-child(odd) { background: #f5f5f5; }，但实际只有第一行变色，或者隔几行才生效。根本原因是 :nth-child() 计算的是父元素下的所有子元素序号，不是单纯“第几个 <tr>”。如果表格里有 <code><thead>、<code><tbody> 或者混入了 <code><th>、<code><td> 直接子元素，序号就会错位。<ul><li>确保目标 <code><tr> 是同一父容器的连续子元素（比如统一放在 <code><tbody> 里）<li>避免在 <code><tbody> 中插入非 <code><tr> 元素（如注释、空文本节点一般不影响，但 <code><div> 或 <code><span></span> 会打断）
<thead><tr>...</tr></thead>，那 <tbody> 里的第一个 <code><tr> 是它父元素的第 1 个子元素 → <code>:nth-child(1)，没问题；但如果 <tbody> 前还有 <code><caption></caption> 或其他元素，序号就偏了
tbody tr:nth-child(odd) 和 tbody tr:nth-of-type(odd) 区别在哪？
这是最常被混淆的点。:nth-child() 看位置，:nth-of-type() 看标签类型。
-
tbody tr:nth-child(odd)：只对“位于奇数位置的子元素且该子元素是<tr>”生效 <li> <code>tbody tr:nth-of-type(odd)：先筛选出所有<tr>，再取其中第 1、3、5… 个（无视中间有没有其他标签）<p>实际场景中，只要 <code><tbody> 下只有 <code><tr>，两者效果一样；但一旦加了 <code><tr class="summary"> 或服务端模板注入了 <code><tr class="divider">，<code>:nth-child()就会跳过它们计数，而:nth-of-type()仍按<tr> 总数算。多数情况下更推荐 <code>:nth-of-type(odd)，容错更强。如何兼容 IE8 及以下？
:nth-child()在 IE9+ 才支持，IE8 及以下完全无效。如果必须支持：- 服务端渲染时直接给奇数行加
class="odd"（如 PHP/Python 模板中用循环索引判断） - 前端 JS 补充（仅需一次）：
document.querySelectorAll('tbody tr').forEach((tr, i) => { if (i % 2 === 0) tr.classList.add('odd'); }); - 不要用 CSS expression（已废弃且性能极差）
注意：现代项目基本无需考虑 IE8，但若维护老系统，JS 补丁比模拟伪类更可靠。
斑马纹和 hover 效果冲突怎么办？
当同时设置：
tbody tr:nth-of-type(odd) { background: #f9f9f9; }<br>tbody tr:hover { background: #eef7ff !important; }
看起来没问题，但实际 hover 时奇数行背景会被覆盖，可读性下降——尤其浅色斑马纹 + 浅色 hover 背景容易看不清文字。- hover 样式优先级天然高于
:nth-of-type，所以不用!important也能覆盖 - 更稳妥的做法是把 hover 当作独立状态处理：
tbody tr:nth-of-type(odd):hover { background: #e6f2ff; }<br>tbody tr:nth-of-type(even):hover { background: #e6f2ff; } - 或者改用透明度叠加：
background-color: rgba(245, 245, 245, 0.7);+ hover 时提高 opacity，避免颜色硬切换
表格行高、字体大小、border-collapse 设置也会影响视觉节奏，这些细节调不好，斑马纹反而分散注意力。
- 服务端渲染时直接给奇数行加
