最简斑马线应使用tbody tr:nth-child(odd)和tbody tr:nth-child(even)分别设置奇偶行背景色，避免thead干扰；禁用tr:nth-of-type()，因语义不可控且无必要，同时须确保html中无冗余tr破坏序号逻辑。
用 nth-child(odd) 和 nth-child(even) 实现最简斑马线
直接给 tr 元素加背景色是最常用也最稳妥的方式，nth-child(odd) 匹配第 1、3、5 行，nth-child(even) 匹配第 2、4、6 行。注意它匹配的是父元素下的所有子元素序号，不是表格的“数据行”逻辑序号。
常见错误是写成 tr:nth-child(2n) 却忘了浏览器兼容性——IE8 及更早版本不支持，但现代项目基本不用考虑。
- 推荐写法：
table tr:nth-child(odd) { background-color: #f9f9f9; } table tr:nth-child(even) { background-color: #ffffff; } - 如果表格有
thead，nth-child会把thead > tr算作第 1 行，导致第一行数据变色异常；此时应限定作用范围：tbody tr:nth-child(odd) - 不要用
tr:nth-of-type()—— 它在有th行或嵌套tr时行为不可控，且无必要
当表格含固定表头（position: sticky）时怎么避免背景错位
给 thead > tr 加 position: sticky 后，tbody tr 的 nth-child 序号依然从 1 开始计，但视觉上第一行数据可能被顶到表头下方，导致斑马线起始颜色和预期不符。
- 解决方案：统一用
tbody tr选择器，再用nth-child(odd)，这样序号只算tbody内部的tr - 别试图靠
nth-child(2n+2)去“跳过”表头——逻辑难维护，且一旦增加汇总行就失效 - 如果用了
display: grid或虚拟滚动（如react-window），nth-child失效，必须改用 JS 控制类名，例如动态加row-odd/row-even
兼容老浏览器（IE8–IE10）的降级方案
IE8 不支持 nth-child，但仍有项目需兼容。此时只能靠类名控制，不能依赖 CSS 伪类。
- 后端渲染时，在每行
tr上输出class="odd"或class="even" - 前端 JS 渲染（如 Vue/React）可在循环中用索引
i % 2 === 0动态绑定类名 - CSS 写死：
.odd { background-color: #f9f9f9; } .even { background-color: #ffffff; }，不依赖选择器序号逻辑 - 注意：IE9–IE10 支持
nth-child，但不支持nth-child(2n+1)这种写法，只认odd/even关键字
为什么有时候斑马线“断了”或颜色不对
多数不是 CSS 写错了，而是 HTML 结构干扰了 nth-child 的计算逻辑。
- 表格里混入了
tr但没写td或th（比如空行、注释行、条件渲染残留的tr）——这些仍会被计入序号 -
colgroup或caption元素虽不在tr层级，但若放在table下，不影响tr:nth-child；真正影响的是同级的其他tr - 用 Flex/Grid 替代表格布局时，
nth-child依然有效，但语义丢失，屏幕阅读器无法识别为表格，可访问性下降
tbody tr 而非笼统的 tr），并检查 HTML 中是否有多余或隐藏的 tr 干扰序号计算。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
