:nth-child(odd)和:nth-child(even)不生效的根本原因是它按父元素下所有子元素的顺序计数，而非仅目标元素类型；应优先用:nth-of-type()或限定tbody作用域确保准确匹配。
为什么 :nth-child(odd) 和 :nth-child(even) 有时不生效？
直接写 tr:nth-child(odd) { background: #f5f5f5; } 看似合理，但常发现第一行没变色，或隔几行才交替——根本原因是 :nth-child() 计数的是父元素下的**所有子元素顺序位置**，不是“第几个 tr”。如果 table 里混有 thead、caption 或注释节点，tr 的实际 :nth-child() 位置就偏了。
实操建议：
- 确保目标元素是父容器下连续、无干扰的同级元素（比如把
tr全放在tbody里，且tbody下只有tr） - 用浏览器开发者工具检查元素实际 DOM 位置：右键 → “检查”，看该
tr的child index是否真为奇数/偶数 - 若结构复杂，改用
:nth-of-type()更稳妥——它只按同类型元素计数，不受其他标签干扰
:nth-child(2n) 和 :nth-child(even) 有区别吗？
没有本质区别：even 是 2n 的别名，odd 等价于 2n+1。但写法影响可读性和兼容性：
-
:nth-child(2n)和:nth-child(2n+1)在所有支持:nth-child的浏览器中行为一致 -
:nth-child(even)/:nth-child(odd)语义更清晰，但 IE9+ 才支持（IE8 及更早版本完全不支持:nth-child） - 如果项目需兼容 IE8，只能用 class 手动标记（如
class="odd"）或 JS 动态添加
表格里怎么安全实现隔行变色？
最可靠的方式是限定作用域 + 使用 :nth-of-type()：
tbody tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
tbody tr:nth-of-type(even) {
background-color: #ffffff;
}
这样做的原因：
-
tbody作为父容器，通常只包含tr，避免了thead或caption干扰计数 -
:nth-of-type()只统计tr类型的兄弟元素，不管中间有没有script、注释或其它标签 - 如果表格有合并单元格（
rowspan），视觉上可能错位，但样式逻辑本身不受影响
除了奇偶行，还能怎么用 :nth-child() 做实用控制？
它不只是“隔行变色”工具，常见实用场景包括：
- 每 3 个一组设不同背景：
:nth-child(3n+1)、:nth-child(3n+2)、:nth-child(3n) - 排除前 2 行（比如表头固定后）：
tr:nth-child(n+3) - 只给最后 3 项加边框：
li:nth-last-child(-n+3) - 注意：
:nth-child()不支持负数系数（如-2n+5合法，-n不合法），且参数必须是整数
真正容易被忽略的点：伪类匹配发生在渲染前，它不感知 JS 动态插入或 class 切换；如果行是 later 通过 JS append 的，要确保它们插入到正确位置，否则序号会断掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
