:nth-child(odd)不生效是因为它按父元素所有子元素的物理位置计数，而非仅<tr>标签；若表格含<thead><tbody>或非<tr>节点，序号即错位，应改用tbody tr:nth-of-type(odd)确保按<tr>类型计数。
为什么 :nth-child(odd) 有时不生效？
常见现象是给 <tr> 写了 tr:nth-child(odd) { background: #f5f5f5; }，但实际只有第一行变色，或者隔几行才生效。根本原因是 :nth-child() 计算的是父元素下的所有子元素序号，不是单纯“第几个 <tr>”。如果表格里有 <thead>、<tbody> 或者混入了 <th>、<td> 直接子元素，序号就会错位。
- 确保目标
<tr>是同一父容器的连续子元素（比如统一放在<tbody>里） - 避免在
<tbody>中插入非<tr>元素（如注释、空文本节点一般不影响，但<div>或<span>会打断） - 如果表头用
<thead><tr>...</tr></thead>，那<tbody>里的第一个<tr>是它父元素的第 1 个子元素 →:nth-child(1)，没问题；但如果<tbody>前还有<caption>或其他元素，序号就偏了
tbody tr:nth-child(odd) 和 tbody tr:nth-of-type(odd) 区别在哪？
这是最常被混淆的点。:nth-child() 看位置，:nth-of-type() 看标签类型。
-
tbody tr:nth-child(odd)：只对“位于奇数位置的子元素且该子元素是<tr>”生效 -
tbody tr:nth-of-type(odd)：先筛选出所有<tr>，再取其中第 1、3、5… 个（无视中间有没有其他标签）
实际场景中，只要 <tbody> 下只有 <tr>，两者效果一样；但一旦加了 <tr class="summary"> 或服务端模板注入了 <tr class="divider">，:nth-child() 就会跳过它们计数，而 :nth-of-type() 仍按 <tr> 总数算。多数情况下更推荐 :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 设置也会影响视觉节奏，这些细节调不好，斑马纹反而分散注意力。
