:nth-child(2n) 选不到偶数行是因为它按父元素所有子元素的物理序号计算，而非仅同类标签；混入div、span等节点会导致序号错位，应改用:nth-of-type()。
为什么 :nth-child(2n) 选不到你想要的偶数行？
因为 :nth-child() 是按父元素下所有子元素的**物理位置序号**计算的，不是按同类标签（比如 tr 或 li）筛选后再编号。如果列表里混有 div、span 或注释节点，序号就会错位。
- ✅ 正确前提：目标元素必须是父容器内连续、无干扰的同级子元素
- ❌ 常见翻车：表格中加了
thead或caption，导致第一个tr实际是第 3 个子节点 - ? 替代思路：用
:nth-of-type()更稳妥——它只统计同类型标签（如所有tr），忽略其他节点
:nth-child(3n+1) 怎么实现「每 3 行一组，高亮第一行」？
这个公式本质是线性表达式：an + b，其中 n ≥ 0 的整数。代入后得到匹配位置：1, 4, 7, 10… 即每组开头。
- 要选每组第二行 → 用
:nth-child(3n+2)（结果：2, 5, 8…） - 要选每组第三行 → 用
:nth-child(3n+3)或简写为:nth-child(3n)（结果：3, 6, 9…） - ⚠️ 注意：不能写成
:nth-child(3n+0)，浏览器不识别+0，必须写3n
表格隔行变色时，tbody 和 thead 的干扰怎么处理？
直接对 tr 写 :nth-child(odd)，往往会让表头也被染色，或因 thead 占位导致正文行序号偏移。
- ✅ 推荐写法：
tbody tr:nth-child(odd)—— 锁定仅作用于tbody内的tr - ✅ 更健壮写法：
tbody tr:nth-of-type(odd)—— 即使tbody里插了div作分隔线也不影响 - ❌ 避免：
table tr:nth-child(odd)，除非你确认thead、tfoot全不存在
循环选择「前 5 项高亮，之后每 7 项重复一次」怎么写？
这种非等差模式无法用单个 :nth-child() 表达，得拆解为多个选择器组合，或改用 JS 动态加 class。
- CSS 方案（有限但够用）：
:nth-child(-n+5), :nth-child(7n+6)—— 前 5 个 + 从第 6 个起每 7 个一循环 - JS 方案更灵活：
rows.forEach((row, i) => {<br> row.classList.toggle('highlight', i }); - ⚠️ 关键提醒：
:nth-child()不支持逻辑“或”以外的复杂条件，像「跳过前 2 个再每 4 个选 2 个」这类，CSS 基本无解
实际项目里，:nth-child 看似简单，真正卡住人的往往是 DOM 结构和伪类计算逻辑的错位——多用浏览器开发者工具的「Computed」面板看元素是否被命中，比反复猜公式更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
