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