tr:nth-child(odd)需限定tbody作用域或改用tr:nth-of-type(odd)，因:nth-child按所有子元素编号，而:nth-of-type仅计同标签；兼容ie8需手动加class。
nth-child(odd) 和 nth-child(even) 怎么写才生效
直接写 tr:nth-child(odd) 不一定变色，常见原因是父容器里混入了其他类型子元素（比如 thead、caption 或注释节点），导致序号计算错位。浏览器按所有子元素统一编号，不是只算 tr。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
tbody tr:nth-child(odd)显式限定作用域，避开thead干扰 - 若表格无
tbody，手动补上——HTML 解析器会自动包裹，但显式写更可控 - 避免在
tr前插入空格、换行或注释，它们也算文本节点，影响:nth-child计数
为什么 nth-of-type 更稳妥但兼容性略差
:nth-of-type 只统计同类型标签（如所有 tr），不受中间杂项干扰，适合结构不规范的表格。但它在 IE8 及更早版本完全不支持。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 现代项目优先用
tr:nth-of-type(odd)，语义清晰、容错强 - 需兼容 IE8？改用 class 手动标记：
<tr class="odd"> + CSS 规则，配合后端或 JS 动态添加 <li>注意：<a style="color:#f60; text-decoration:underline;" title="伪类选择器" href="https://www.php.cn/zt/70604.html" target="_blank">伪类选择器</a>权重相同，<code>tr:nth-of-type(odd)和tr:nth-child(odd)不能同时存在且期望不同效果——后者会被覆盖 - 用浏览器开发者工具检查 computed 样式，确认
background-color是否被 override - 避免写
background: #fff（会清空 background-image），改用background-color: #f5f5f5 - 如果表格用了
border-collapse: collapse，确保td和th没单独设背景色——它会盖住tr的背景 - 每 4 行高亮第 1 行 →
:nth-child(4n+1) - 从第 2 行起，每 3 行高亮 →
:nth-child(3n+2) - 想排除前两行？用
:nth-child(n+3)配合嵌套，但更推荐加 class 控制范围
background-color 覆盖不了？检查层叠顺序和透明度
奇偶行背景没显示，大概率是已有样式优先级更高，或者 background-color 被设为 transparent / inherit，甚至父元素设置了 background-image。
实操建议：
立即学习“前端免费学习笔记（深入）”；
需要隔三行、五行变色？别硬背公式，记住 an+b 写法
:nth-child(3n+1) 表示第 1、4、7… 行，不是“每三行”。容易误以为是“从第 3 行开始每隔 2 行”，实际是线性函数：a 是步长，b 是起始偏移（从 1 开始计）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
复杂规则（比如“第 1–3 行不着色，之后奇偶交替”）靠纯 CSS 已难维护，该上 JS 动态加 class 就别硬撑。
