斑马线效果应使用tbody tr:nth-of-type(odd/even)实现，避免nth-child受thead干扰；推荐半透明浅灰背景、CSS变量管理、hover高亮及可访问性对比度保障。
直接用 tbody tr:nth-of-type(odd) 和 tbody tr:nth-of-type(even) 设置背景色，就能稳定实现斑马线效果。关键不是“能不能”，而是“怎么写才不翻车”——尤其在有表头、动态渲染或兼容旧浏览器时。
必须显式限定 tbody
即使 HTML 里没写 <tbody> 标签，浏览器也会自动补上，但 CSS 选择器是按真实 DOM 结构匹配的。如果只写 tr:nth-child(odd)，<thead> 里的行会被计入序号，导致第一行数据变成偶数位，整条纹错一格。
- ✅ 正确写法：
tbody tr:nth-of-type(odd) { background-color: rgba(245, 245, 245, 0.8); } - ✅ 更推荐
nth-of-type：它只统计tr元素，自动跳过thead或tfoot中的干扰节点 - ❌ 避免
table tr:nth-child(odd)或tr:nth-child(even)—— 动态表格、CMS 输出、带表头的表格极易失效
颜色别太“硬”，优先用半透明灰
纯白（#fff）和纯黑（#000）背景配深色文字容易视觉疲劳，尤其在细边框或高亮悬停时过渡生硬。
- 推荐浅灰背景：
rgba(245, 245, 245, 0.8)或hsl(0, 0%, 97%) - 用 CSS 变量统一管理：
--zebra-odd: rgba(245, 245, 245, 0.8);，再在规则中引用var(--zebra-odd)，方便后续适配暗色模式 - 避免用
background-image模拟条纹——行高微调就错位，flex/grid 布局下直接失效
兼容老浏览器要另做处理
IE8 及更早版本完全不支持 :nth-child，连 :first-child 都不稳定，纯 CSS 无解。
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染时，可提前为奇偶行加上
class="odd"/class="even" - 前端动态表格，用 JS 在插入行后批量加 class：
rows.forEach((row, i) => row.classList.toggle('odd', i % 2 === 0)); - 不要用内联样式写背景色（如
<tr style="background:#f0f0f0">），会覆盖伪类，也无法响应主题切换
顺手加点增强体验的小细节
斑马线不是终点，而是提升可读性的起点。
- 配合
border-collapse: collapse消除双线边框，让表格更紧凑 - 加一行悬停效果：
tbody tr:hover { background-color: #eef2ff; }，用户定位更直观 - 确保文字与背景的对比度 ≥ 4.5:1，满足 WCAG 可访问性标准
