tr:nth-child(odd)不生效是因为未限定作用域，浏览器将thead、caption等兄弟节点计入父元素子序号，导致tbody内数据行序号错位；应使用tbody tr:nth-child(odd)精准匹配。
直接用 tr:nth-child(even) 和 tr:nth-child(odd) 就能实现，但必须限定作用域，否则表头、注释或动态插入的行会破坏计数逻辑。
为什么 tr:nth-child(odd) 有时不生效
常见原因是没限制父容器，比如只写 tr:nth-child(odd)，浏览器会把 <thead> 里的 <tr> 也计入序号——第1行是表头，第2行才是数据行，结果第一行数据被当成“偶数行”，颜色错位。
- 正确做法：用
tbody tr:nth-child(odd)和tbody tr:nth-child(even) - 如果表格没显式写
<tbody>，浏览器会自动补上，但选择器仍要写tbody才可靠 - 避免用
tr:nth-of-type()：它受注释、空格文本节点干扰，实测计数不稳定
tbody tr:nth-child(even) 和 table tr:nth-child(even) 差在哪
前者只匹配 <tbody> 内的 <tr>，后者会把 <thead>、<tfoot> 甚至注释前的 <tr> 全部算进去。在有表头的表格里，后者大概率导致第一行数据染错色。
- 示例：表头1行 + 数据4行 →
table tr:nth-child(odd)会选中第1、3、5行（即表头、第2行数据、第4行数据） -
tbody tr:nth-child(odd)则精准命中第1、3行数据 - 动态插入新行时，只要 append 到
<tbody>，CSS 规则自动生效；若误插到<table>直接子节点，就可能脱离作用域
颜色值和边框怎么配才不出问题
十六进制或 rgba() 最稳妥，命名色如 lightgray 在不同浏览器渲染差异大；同时必须设 border-collapse: collapse，否则背景色会被默认分离边框割裂出白缝。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
table { border-collapse: collapse; } - 避免在
<td>上用内联style="background-color: ..."，会覆盖 CSS 伪类规则 - 若需兼容 IE8 及更早版本，得用 JS 遍历设
className或style.backgroundColor，但现代项目基本不用考虑
最容易被忽略的是：即使写了正确的选择器，如果表格结构里混入了注释、空格文本节点，或者用了 innerHTML 重写整个 <tbody>，都可能导致 DOM 重建后样式短暂丢失或计数重置——这时候不是 CSS 写错了，而是 DOM 操作方式触发了意外重排。
