nth-child不准确是因按父元素所有子元素统一编号，含空白文本节点和注释；应改用:nth-of-type(odd/even)或通过开发者工具确认真实序号后推导an+b公式。
当 nth-child 选中奇数或偶数元素不准确，通常不是语法写错，而是忽略了它**按父元素下所有子元素统一编号**的特性——它不区分标签类型，只看位置序号。比如父容器里混有 <div>、<p>、注释、文本节点（如换行空格）时，目标元素的实际序号就和视觉顺序不一致。
确认目标元素的真实序号
在浏览器开发者工具中右键目标元素 → “Edit as HTML”，观察它在父元素内的实际位置（包括隐藏的文本节点）。常见干扰源：
- HTML 中换行和缩进产生的空白文本节点（尤其在
<div>内换行后） - 注释节点
<!-- ... --> - 其他非目标标签（如
<span>、<em>）占位
用 :nth-of-type() 替代（更直观）
如果只想选中某类标签的奇偶项（如所有 <li> 的奇数项），用 :nth-of-type(odd) 更可靠——它只计算同类型兄弟元素：
ul li:nth-of-type(odd) { background: #f0f0f0; } /* 只统计 li，忽略其他兄弟 */注意：nth-of-type 不支持自定义公式如 2n+1 的简写别名（odd/even 可用），但功能上更贴近“视觉奇偶”预期。
立即学习“前端免费学习笔记（深入）”；
用 nth-child(an+b) 精确匹配位置
若必须用 nth-child，需根据真实序号反推公式。例如：目标 <li> 实际位于父元素第 3、6、9… 个位置（即每 3 个出现一次，从第 3 个开始），则写：
li:nth-child(3n) { /* 匹配第 3、6、9... 个子元素 */ }通用解法：
- 列出目标元素在父级中的实际序号（如 2, 5, 8, 11…）
- 计算公差
a = 3，首项b = 2→ 公式为3n-1（因n从 1 开始，3×1−1=2） - CSS 中写作
li:nth-child(3n-1)
清理 DOM 结构减少干扰
避免因空白节点导致序号偏移：
- 压缩 HTML：删除元素间不必要的换行与空格（适合构建流程中处理）
- 用 CSS 移除空白节点影响：
font-size: 0在父容器上，子元素再设正常字号（慎用，影响可访问性） - 服务端或 JS 渲染时过滤掉纯空白文本节点
不复杂但容易忽略——先看清结构，再选对伪类，最后用公式校准。
