tbody tr:nth-of-type(even)最稳妥，因它只统计tr标签、无视thead等干扰；tr:nth-child(even)常失效是因浏览器按dom子元素序号计数，thead、caption、隐藏tr等均占用序号。
直接写 tr:nth-child(even) 大概率失效，尤其表格带 thead 或结构不规范时——必须限定作用域、避开干扰节点，否则颜色根本不会按视觉行数交替。
为什么 tr:nth-child(even) 常常不生效
浏览器按 DOM 子元素顺序计数，不是按“你看到的第几行”。thead 里的 tr、caption、注释节点、甚至隐藏的 tr（display: none）都会占用序号。比如 thead 有 1 行，tbody 第 1 行实际是父 table 的第 2 个子元素 → 匹配 :nth-child(2)；但若 thead 有 2 行，它就变成第 3 个 → 不再匹配 even。
- 用开发者工具选中某行
tr，看它的Computed面板里background-color是否被其他规则覆盖 - 检查
table下是否混入了form标签——HTML 规范禁止form直接嵌套在tbody里，浏览器会把它提到tbody外，彻底打乱tr的父子关系 - 临时删掉
thead测试：如果样式立刻生效，说明就是表头干扰了计数
最稳妥的写法是 tbody tr:nth-of-type(even)
:nth-of-type() 只统计同类型标签（tr），完全无视 thead、tfoot、caption 等非 tr 元素。它数的是“第几个 tr”，更贴近人对“表格第 2 行”的直觉。
- 必须加
tbody前缀，避免误染thead或tfoot中的tr - 兼容性没问题：IE9+ 和所有现代浏览器都支持
- 动态渲染（Vue/React）后新增的
tr仍能自动匹配，不用 JS 手动加 class - 不要写成
table tr:nth-of-type(even)——这样会把thead tr也算进去，反而出错
三色循环或跳过前 N 行怎么写
三色循环不能直接用 3n，因为 n 从 0 开始算，而 :nth-child 从 1 开始。正确写法是 3n+1、3n+2、3n+3。
- 想从第 2 行开始交替（比如首行是标题但没用
thead包裹）：用tbody tr:nth-of-type(odd):nth-of-type(n+2) - 每 3 行一组变色：
tbody tr:nth-of-type(3n+1) { background: #f0f0f0; }、tbody tr:nth-of-type(3n+2) { background: #ffffff; }、tbody tr:nth-of-type(3n+3) { background: #e6f7ff; } - 响应式场景下，移动端把表格转成卡片流时，
nth-of-type仍按 DOM 顺序工作，但视觉已不是“行”——此时建议媒体查询里重置背景，改用::before模拟分隔
真正关键的不是公式怎么背，而是盯住选择器实际作用在哪个父容器、里面到底有几个 tr 节点。DOM 结构一乱，再漂亮的表达式也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
