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