正确写法是tbody tr:nth-child(odd)或tbody tr:nth-of-type(odd)，因浏览器自动补全tbody但选择器必须匹配真实dom结构，且nth-of-type更鲁棒；背景色推荐半透明浅灰并用css变量管理；高亮行应提升选择器权重而非滥用!important；ie8需js手动加class。
tbody tr:nth-child(odd) 必须显式写 tbody
直接写 tr:nth-child(odd) 几乎必然错位——浏览器会把 <thead> 里的 <code><tr> 算作第 1 个子元素，导致第一行数据被当成偶数行染色。哪怕 HTML 源码没写 <code><tbody> 标签，浏览器 DOM 中也会自动补上，但 CSS 选择器必须按真实结构写。
<p>正确写法只有两种：<code>tbody tr:nth-child(odd) 或更鲁棒的 tbody tr:nth-of-type(odd)。nth-of-type 只统计 <tr> 元素，完全跳过 <code><th>、<code><td> 或其他干扰节点，动态渲染或 CMS 输出表格时更稳。
<ul><li>别用 <code>table tr:nth-child(odd)：作用域太宽，<thead> 和 <code><tfoot> 都会被卷入计数
<li>别依赖“没写 tbody 就不用写”：DOM 已补，但选择器不匹配就失效</li>
<li>如果表格含 <code>rowspan 且跨多行，nth-child 仍有效，但视觉节奏可能失衡——此时应换 JS 控制或重构布局
背景色别用纯黑/纯白，优先选半透明灰
纯 #ffffff 和 #000000 对比太强，尤其配细边框或深色文字时容易视觉疲劳；高亮交互（如 hover 或选中）也难平滑过渡。斑马纹本质是辅助阅读，不是装饰。
推荐用带 alpha 的浅灰：rgba(245, 245, 245, 0.8) 或 hsl(0, 0%, 97%)。既保持轻量感，又留出足够对比度。若需暗色模式适配，抽成 CSS 变量：--zebra-odd: rgba(245, 245, 245, 0.8);，再在规则里引用 background-color: var(--zebra-odd);。
- 禁用
background-image模拟条纹：维护成本高、行高稍变就错位、flex/grid 下直接失效 - 禁用内联样式设背景色（如
<tr style="background:#f0f0f0">）：会覆盖伪类，且无法响应主题切换 <li>如果表格带边框，务必加 <code>border-collapse: collapse，否则双线边框会让条纹显得臃肿 - 单选场景下，必须先清除旧
selected类，否则点来点去所有行都亮着 -
querySelector('.selected')要限定范围，否则删错其他表格里的高亮行 - 如果用了框架（如 React/Vue），注意虚拟 DOM 渲染后 class 同步时机，避免样式闪动
- 动态插入新行后，必须同步调用 JS 补 class，否则新行无斑马纹
- 别用
document.write动态生成表格：现代项目基本不用，且破坏可维护性 - 真正容易被忽略的点是：斑马纹依赖表格语义结构。没写
<thead>/<code><tbody> 的表格，CSS 选择器就失效；JS 插入行但没同步 class，<code>nth-child就会重算错乱
高亮选中行时，!important 不是万能解
当点击行要高亮（比如加 selected 类），而斑马纹样式又用了 tbody tr:nth-child(odd) 这类高优先级规则时，仅靠 tr.selected { background-color: #e3f2fd; } 常常不生效——因为伪类选择器权重更高。
这时加 !important 确实能压过，但代价是后续所有背景色调整都得加它，维护性差。更干净的做法是提升选择器权重：tbody tr.selected 或 table tbody tr.selected，避免全局污染。
IE8 及更老浏览器只能靠 JS 加 class
:nth-child 在 IE8 完全不可用，连 :first-child 都不稳定。这时候纯 CSS 无解，硬扛兼容性就得放弃伪类。
可行方案只有两个：服务端渲染时直接输出 class="odd"/class="even"；或前端用 JS 遍历 tbody 下的 tr，手动加 class。JS 实现要注意：只处理 tbody 内的 tr，跳过 thead/tfoot，且需兼容 rowspan 导致的行合并逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
