tbody tr:nth-child(even) 没生效最常见原因是 thead 中的 tr 占据了第1个子元素位置，导致 tbody 内首行被误判为偶数行；应改用 tbody tr:nth-of-type(even) 或确保显式书写 tbody。

tbody tr:nth-child(even) 为什么没生效？

最常见原因是 tr:nth-child(even) 写在了整个 table 下，但表格里有 thead —— 它的第一个 tr 占了第 1 位，导致 tbody 里的第一行变成第 2 个子元素，被 even 匹配上，看起来“错位”了。

真正要控制的只是数据行，所以必须限定作用域：

• 用 tbody tr:nth-child(even)，靠父容器隔离干扰
• 或改用 tbody tr:nth-of-type(even)，它只数 tr 标签，无视 thead、caption 等兄弟节点
• 如果表格没写 tbody，浏览器会自动补，但不能依赖——显式加上更可靠

tr:nth-child(odd) 和 tr:nth-child(even) 到底选哪个？

选哪个不取决于“奇偶语义”，而取决于你希望哪一行先变色。比如想让第一行（视觉上）是浅灰，第二行白，第三行浅灰……那就用 tbody tr:nth-child(odd)；如果第一行白、第二行浅灰，则用 tbody tr:nth-child(even)。

注意两点：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• nth-child(2n) 和 nth-child(even) 等价，但后者语义清晰、兼容性略好（IE9+），推荐优先用 even/odd
• 别写成 tr:nth-child(2n+1) 这类表达式——虽然数学上对，但易读性差，且在动态插入行时容易因 DOM 顺序变化出错

hover 样式覆盖斑马纹怎么办？

鼠标悬停时背景色消失，大概率是 CSS 优先级问题：tr:hover 规则写在了 nth-child 规则前面，被后者覆盖。

解决很简单：

• 确保 tr:hover 声明在 tbody tr:nth-child(even) 之后
• 不要给 tr:hover 加 !important，它会让后续主题切换或深色模式适配变得困难
• 如果用了内联样式（比如 JS 动态设 style="background-color:..."），CSS 伪类会被直接忽略——这类场景建议统一用 class 控制状态

深色模式和移动端下斑马纹失效？

不是失效，是颜色值没适配。默认写的 #f5f5f5 在深色背景下可能接近黑色，肉眼看不见；移动端缩放后 subpixel 渲染也可能让条纹边缘发虚。

关键动作：

• 加媒体查询：@media (prefers-color-scheme: dark) { tbody tr:nth-child(even) { background-color: #2d2d2d; } }
• 移动端若转为卡片流（display: block），nth-child 仍按 DOM 顺序工作，但视觉已非“行”——这时应放弃斑马纹，改用 ::before 或边框模拟区分感
• 始终配合 border-collapse: collapse 和固定 line-height，避免因单元格高度不一致导致条纹错位

实际最难的不是写对选择器，而是确认表格 DOM 结构是否干净——thead、caption、JS 插入的空 tr、甚至 HTML 注释节点，都会悄悄改变 nth-child 的计数起点。调试时打开开发者工具，右键检查目标 tr，看它在父元素下的“Child Index”是多少，比猜更可靠。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！