正确实现表格斑马纹需用 tbody tr:nth-of-type(odd) 或 tbody tr:nth-child(odd)，限定在 tbody 内避免表头干扰；颜色推荐带透明度的浅灰并用 CSS 变量管理；禁用内联样式覆盖，兼容旧浏览器需 JS 回退。
直接用 tbody tr:nth-child(odd) 或 tbody tr:nth-of-type(odd) 就能实现，但关键在写对选择器、避开常见坑——不是所有 tr:nth-child(odd) 都能生效。
必须限定在 tbody 里选行
浏览器会自动补全 <tbody>，但 CSS 计算时仍按真实 DOM 结构来。如果表格有 <code><thead>，<code>table tr:nth-child(odd) 会把表头的 <tr> 算进去，导致第一行数据变成偶数位，斑马纹错一格。
<ul>
<li>正确写法是：<code>tbody tr:nth-child(odd) { background-color: #f9f9f9; }
tbody tr:nth-of-type(odd) { background-color: #f9f9f9; } ——它只统计 <tr> 标签，跳过 <code><thead> 和 <code><tfoot> 的干扰
<li>哪怕 HTML 没写 <code><tbody> 标签，CSS 里也得显式写出 <code>tbody，这是硬性规则
颜色别用纯白或纯黑
纯 #fff 或 #000 背景容易造成视觉疲劳，尤其搭配细边框或深色文字时；也不利于 hover 或暗色模式切换。
- 优先选带透明度的浅灰：比如
rgba(245, 245, 245, 0.8)或hsl(0, 0%, 97%) - 用 CSS 变量管理颜色，方便主题切换：
:root { --zebra-odd: rgba(245, 245, 245, 0.8); }，再写tbody tr:nth-child(odd) { background-color: var(--zebra-odd); } - 避免用
background-image模拟条纹——维护难、行高一变就错位
动态内容和兼容性要注意
:nth-child 是浏览器自动重计算的，新增行一般不会失效；但旧浏览器（如 IE8）完全不支持，得换方案。
立即学习“前端免费学习笔记（深入）”；
- JS 动态插入新行时，确保 append 到
<tbody> 末尾，否则序号逻辑可能乱 <li>IE8 及更老版本不支持 <code>:nth-child，只能靠 JS 给每行加 class，或服务端渲染时直接输出 class - 含
rowspan的复杂表格，伪类容易失准，建议改用 JS 控制，或重构为更扁平的结构
别用内联样式覆盖伪类
像 <tr style="background:#f0f0f0"> 这种写法会直接压掉 CSS 伪类效果，而且无法响应主题变化。
<ul>
<li>所有背景色统一由 CSS 控制，保持样式可维护</li>
<li>配合 <code>tbody tr:hover { background-color: #eef; } 增强交互，但 hover 色要与斑马色有足够对比
thead tr, tfoot tr { background-color: #e0e0e0; }
