:nth-child(2n)选不到目标行是因为它按父元素下所有子元素的物理顺序计数，不区分标签类型；若存在thead、tbody或div等干扰节点，序号即错乱。
为什么 :nth-child(2n) 选不到你想要的行
因为 :nth-child 是按父元素下所有子元素的**物理顺序**计数，不区分标签类型。如果表格里有 <thead>、<code><tbody> 或混入了 <code><div>、注释节点，序号就全乱了。常见现象是：明明想隔行变色，结果第一行没生效，或者颜色错位。
<p>实操建议：</p>
<ul>
<li>确保目标元素是父容器下连续、同级、无干扰的子元素；否则改用 <code>:nth-of-type
tbody tr 上，而不是 table tr，避免被 thead 干扰
:nth-child(3n+1) 怎么实现每 3 行一组的首行高亮
公式 an+b 中，a 是周期长度，b 是起始偏移（从 1 开始计）。所以 3n+1 匹配第 1、4、7、10…个子元素——即每组第一个。
使用场景举例：订单列表中，每 3 笔订单加一个分隔线或标题栏。
注意点：
-
n从 0 开始代入：当n=0→3×0+1 = 1；n=1→4；以此类推 - 别写成
3n-1，它会跳过前两个（n=0得 -1，无效；n=1得 2，从第 2 个开始） - 若要匹配每组最后一个，用
:nth-child(3n)（即 3、6、9…）
表格奇偶行着色但表头不动，该用 :nth-child 还是 :nth-of-type
优先用 tbody tr:nth-child(odd) 或 tbody tr:nth-child(even)。原因：表头 thead tr 和数据行 tbody tr 不在同一个父级子序列里，tbody 内部的 tr 是连续的，不会受 thead 影响。
而 :nth-of-type 在这里反而多余——它按标签名筛选再计数，但 tr 本就是唯一类型，和 :nth-child 效果一样，还多一层解析开销。
关键提醒：
- 别漏写
tbody，直接写table tr:nth-child(odd)会把thead tr算进去 - 如果后端动态插入
tr（比如加载更多），确保新行也插在tbody内，否则样式断裂 - CSS 优先级不够时，加
!important不如提高选择器特异性，例如table.my-table tbody tr:nth-child(even)
循环选择中遇到动态渲染或 Vue/React 列表失效怎么办
:nth-child 是纯 CSS 机制，只依赖最终 DOM 结构。框架渲染后若节点被包裹（比如 Vue 的 <transition-group></transition-group> 插入 <span></span> 或注释节点），或用了 v-if 导致兄弟节点不连续，序号就断了。
解决路径：
- 打开 DevTools，确认目标元素是否仍是父容器下连续的第 n 个
child；如果不是，说明框架注入了中间节点 - 改用 JS 控制 class：在
v-for或.map()时计算索引index % 3 === 0，绑定 class - 服务端渲染或静态 HTML 场景才最适配
:nth-child；客户端高频更新列表，CSS 伪类不如数据驱动稳定
真正容易被忽略的是：哪怕 DOM 看似干净，Shadow DOM、Web Component 的封装边界也会让 :nth-child 失效——它只作用于 light DOM 的直属子元素。
