tbody tr:nth-child(even) 更稳妥，因 nth-child 按父元素所有同级子元素物理顺序计数，含 thead 中的 tr 会导致序号偏移；而 tbody 限定范围可避免干扰，且比同时设置 odd/even 更轻量易维护。
只给偶数行加背景色，nth-child(even) 就够了
不需要写两套规则。如果页面默认背景是白色或容器已有底色，只需为偶数行单独设一个背景色，奇数行自然保持原样，视觉上就是交替效果。比如：
tbody tr:nth-child(even) { background-color: #f9f9f9; }这样比同时写 odd 和 even 更轻量，也更利于后期维护。
tbody tr:nth-child(even) 为什么比 tr:nth-child(even) 更稳妥
因为 nth-child 是按父元素下所有同级子元素的物理顺序计数，不区分语义。如果表格含 <thead>，里面的 <code><tr> 会算作第 1 个子元素，导致 <code>tbody 中第一行变成第 2 个 tr，被当成 even 而误着色。
- 常见错误现象：只有第二行、第四行变色，第一行数据没反应
- 真正起作用的是 DOM 位置，不是“第几条数据”
- 即使
<thead> 里只有一行 <code><tr>，也会让后续所有 <code>tbody tr的序号整体 +1 - 用
tbody tr:nth-child(even)把计数范围锁死在数据行内部，彻底避开干扰 - 但注意：
nth-of-type在 IE8 及更早版本不支持 - 如果结构无法控制，且需兼容老浏览器，建议后端或 JS 层手动加
class="even"类
遇到动态插入或混合类型 tr 时，nth-child 可能失效
Vue/React 项目中若用 v-if 或条件渲染控制某行显隐，DOM 节点会被移除，剩余 tr 的物理位置重排，nth-child(even) 的结果就会跳变。同样，如果表格里混入了 <tr class="divider"> 或展开详情行，它们也参与计数，破坏奇偶节奏。
<ul>
<li>此时 <code>nth-of-type(even) 更可靠：它只统计 tr 标签，忽略其他兄弟节点
多列布局（column-count）下 nth-child(even) 仍按文档流计数
在 CSS 多列列表中，li:nth-child(even) 不是“每列内第 2、4 行”，而是整个 <ul></ul> 里第 2、4、6… 个 li 元素。这意味着颜色会跨列延续——第一列第 1 行（odd）、第二列第 2 行（even）、第三列第 3 行（odd），不会重置计数。
- 纯 CSS 无法实现“每列独立隔行变色”
- 若设计强依赖该效果，得靠 JS 按列分组后动态加类
- 多数场景下，全局连续计数反而更符合阅读动线，不必强行拆列
tr 的兄弟元素，都会让 nth-child 的序号偏移。写之前先看一眼开发者工具里的 Elements 面板，确认目标 tr 确实是连续的同级子节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
