:nth-child(2n+1)不能直接用于表格隔行变色，因其按父元素所有子元素顺序计数，遇等会错位；应限定为tbody tr:nth-child(odd/even)。
为什么 :nth-child(2n+1) 不能直接用于表格隔行变色？
因为 :nth-child 是按父元素下的所有子元素顺序计数，不是按 <tr> 标签单独计数。如果表格里有 <code><thead>、<code><tbody> 或混入 <code><th>、<code><caption></caption> 等，:nth-child(2n+1) 就会错位——比如第 1 行是 <thead>，那第 2 个子元素可能是 <code><th>，根本不是你想染色的 <code><tr>。
<h3>正确做法：给 <code><tr> 加上明确作用域
<p>必须把选择器限定在目标容器内，最稳妥的是用 <code><tbody> 包裹数据行，并对它内部的 <code><tr> 使用 <code>:nth-child：
tbody tr:nth-child(odd) {
background-color: #f5f5f5;
}
tbody tr:nth-child(even) {
background-color: #ffffff;
}
其中 odd 等价于 2n+1，even 等价于 2n，语义更清晰，也避免手误写错公式。
- 确保所有数据行都在
<tbody> 内，不要漏掉或错放 <li>如果表格没有 <code><tbody>，浏览器会自动补上，但显式写出更可控 <li>不要用 <code>table tr:nth-child(2n+1)——它仍会把<thead><tr> 算进去 <h3>遇到 <code><colgroup></colgroup>或动态插入行时怎么办？<colgroup></colgroup>不影响<tr> 的 <code>:nth-child计数（它不参与 DOM 子元素排序），但 JS 动态插入新<tr> 时要注意： <ul><li>新行必须插入到 <code><tbody> 内，而不是直接插进 <code><table><li>如果用 <code>innerHTML替换整个<tbody>，样式会自动重算，没问题 <li>若用 <code>appendChild()插入单个<tr>，要确认它确实成了 <code><tbody> 的直接子元素（检查 <code>tr.parentNode === tbody）兼容性与性能提醒
:nth-child在 IE9+ 完全支持，无需前缀；现代浏览器中性能无压力，哪怕几百行也无感。真正容易被忽略的是：当表格含合并单元格（
rowspan）时，视觉上的“隔行”和 DOM 结构里的“第 n 行”可能错开——这时 CSS 无法自动对齐，得靠 JS 计算渲染后的真实行号，或者改用background-image模拟条纹背景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
