最直接的斑马线实现是使用tr:nth-child(odd)和tr:nth-child(even)，需作用于tr且优先限定在tbody内；表头需单独重置；ie8不支持需js降级；颜色须满足wcag对比度要求，悬停高亮可增强可用性。
用 nth-child(odd) 给表格行加背景色最直接
斑马线本质就是隔行变色，tr:nth-child(odd) 选中所有奇数行（第1、3、5…行），tr:nth-child(even) 选中偶数行。注意：必须作用在 tr 上，而不是 td 或 table，否则可能被表头或嵌套表格干扰。
常见错误是写成 tr:nth-of-type(odd) —— 它只对同类型元素计数，而 tr 在 tbody 和 thead 中属于不同类型，会导致样式错乱。坚持用 nth-child 更可靠。
示例代码：
table tr:nth-child(odd) {
background-color: #f9f9f9;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
表头 thead 不参与斑马线，需要单独重置
如果表格有 thead，它的 tr 也会被 nth-child 匹配到（比如它是第1个子元素），导致表头也变色。这不是想要的效果。
解决办法是显式覆盖 thead tr 的背景：
- 加一句
thead tr { background-color: #eef2f7; }（或其他你想要的表头色） - 或者更稳妥地，把选择器限定在
tbody内：tbody tr:nth-child(odd)和tbody tr:nth-child(even)
后者更推荐——语义清晰，不依赖表头是否存在，也不怕后续加 tfoot 打乱计数。
IE8 及更老浏览器不支持 nth-child，需降级方案
如果你仍需兼容 IE8，nth-child 会完全失效。此时只能靠 JS 动态加 class，或手动给每行加 class="odd"/class="even"。
纯 CSS 无解，别试图用 :first-child + + 邻居选择器链式模拟——太脆弱，增删行就崩。
现代项目基本可忽略这点，但若维护老系统，得提前确认目标环境。
颜色对比度不够时，斑马线反而降低可读性
浅灰配白色看着“高级”，但如果字体是浅灰或字号小，用户扫视数据时容易跳行。WCAG 推荐文本与背景对比度 ≥ 4.5:1。
实操建议：
- 用
#f5f5f5和#ffffff比#f9f9f9和#ffffff更稳妥 - 深色主题下，改用
#2d2d2d（奇数行）和#3a3a3a（偶数行），避免纯黑+深灰发虚 - 鼠标悬停时再加一层高亮（
tr:hover { background-color: #e0e7ff; }），比单纯斑马线更实用
斑马线不是装饰，是辅助视觉定位的工具；颜色差太小，它就失去意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
