:nth-child(odd)在表格中常失效，因其按dom子元素顺序计数而非仅元素；:nth-of-type(odd)更可靠，只统计标签，兼容结构，但ie8不支持，复杂rowspan场景需js辅助。
:nth-child(odd) 能实现表格隔行变色，但直接套用容易漏掉第一行、错位，甚至在有 <thead> 或 <code><tbody> 的结构里完全失效。
<h3>为什么 <code>:nth-child(odd) 在表格里经常不生效？
因为 :nth-child() 是按 DOM 顺序数的，不是按 <tr> 元素数的。如果表格包含 <code><thead>、<code><tbody> 或其他非 <code><tr> 子元素（比如注释、空格文本节点），计数就会偏移。
<ul><li>
<code><thead><tr></tr></thead> 中的 <tr> 占了第 1 个位置，导致 <code><tbody> 里的第一个 <code><tr> 变成第 2 个，被 <code>:nth-child(odd) 跳过
<thead>，若 <code><table> 直接子节点是 <code><tr>，也得确认没有隐藏的文本节点干扰（比如换行缩进）
<li>
<code>:nth-child(odd) 匹配的是“第 1、3、5…个子元素”，不是“所有奇数序号的 <tr>”
<h3>更稳妥的做法：用 <code>:nth-of-type(odd)
:nth-of-type() 只统计同类型标签（这里是 <tr>），无视其他兄弟节点，对表格结构更鲁棒。
<pre class="brush:php;toolbar:false;">table tr:nth-of-type(odd) {
background-color: #f5f5f5;
}
table tr:nth-of-type(even) {
background-color: #ffffff;
}</pre>
<ul><li>适用于含 <code><thead>/<code><tbody> 的标准表格，<code><thead><tr> 和 <code><tbody><tr> 分开计数，互不影响
<li>如果只想给 <code><tbody> 里的行着色，写成 <code>tbody tr:nth-of-type(odd) 更精准
:nth-of-type，如需兼容，得用 JS 或 class 手动标记遇到合并单元格（rowspan）怎么办？
rowspan 不影响 :nth-of-type 计数逻辑，但视觉上会破坏交替效果——比如某行占两行高，下一行颜色就接不上。
- 这不是 CSS 选择器的问题，而是设计预期与视觉反馈的错位
- 如果必须保持视觉连贯，可改用渐变背景或 border-bottom 模拟分隔，而非依赖纯背景色
- 极端情况（大量
rowspan）建议放弃纯 CSS 方案，用 JS 动态计算并添加class="odd"/class="even"
真正麻烦的不是写哪条规则，而是你得先看清 HTML 结构里到底有几个 <tr> 是 <code><table> 的直接子元素——打开开发者工具，把鼠标悬停在 <code><tr> 上看它的父节点和兄弟节点，比死记语法有用得多。</tr>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
