HTML怎么用nth-child_html nth-child选择器用法详解【全网最全】

:nth-child() 选中的是父元素下按物理顺序排第n位且匹配选择器的子元素，而非仅同类型元素的第n个；如div:nth-child(2)失效，常因第2个子元素非div，此时应改用nth-of-type()。

:nth-child() 不是“选第几个 li”的快捷写法，而是“选父元素下按顺序排第 n 位的子元素，且这个子元素恰好匹配你写的标签名或类名”。理解这点，90% 的误用就消失了。

为什么 div:nth-child(2) 有时不生效？

因为浏览器先数父元素的所有直接子节点（不管是不是 div），再看第 2 个是不是 div。如果不是，整个选择器就失败。

• HTML 是：<div class="wrap"><p>文本</p><span>内容</span><div>目标</div></div> → 第 2 个子元素是 <span>，所以 div:nth-child(2) 完全不匹配
• 真正生效的是 div:nth-child(3)，因为目标 div 是父元素的第 3 个子节点
• 如果想“不管前面有什么，只找第 2 个 div”，该用 div:nth-of-type(2)，它只数同类型元素

:nth-child(odd) 和 :nth-child(2n+1) 真的一样吗？

语义和结果一致，但底层计算逻辑不同：前者是关键词，后者是公式。多数场景可互换，但注意一个细节：

• 2n+1 中的 n 从 0 开始代入：n=0 → 1，n=1 → 3，n=2 → 5……
• odd 是浏览器内置映射，不依赖公式展开，兼容性略好（IE9+ 都支持）
• 性能上无差异，但写 odd 更易读、少出错；写 2n+1 在需要动态生成 CSS（如 Less/Sass 循环）时更灵活

怎么选“前 3 个”或“第 4 到第 8 个”元素？

靠公式里的符号方向：-n 表示倒推，n+ 表示顺延。关键不是背公式，而是记住 n 从 0 开始代入试算。

立即学习“前端免费学习笔记（深入）”；

• 前 3 个：:nth-child(-n+3) → n=0→3，n=1→2，n=2→1，n=3→0（无效），所以只匹配位置 1/2/3
• 第 4 到第 8 个：:nth-child(n+4):nth-child(-n+8)，两个条件叠加，缺一不可
• 注意：不能写成 :nth-child(4..8) 或 :nth-child(4-8)，CSS 不支持区间语法

表格里用 tbody tr:nth-child(even) 为什么还是错行？

常见于表头 thead 里有多个 tr，或 tbody 前混入了注释、空格文本节点（虽然肉眼不可见，但 DOM 中算子元素）。

• 最稳做法：显式限定作用域，写成 tbody > tr:nth-child(even)（加 > 确保只选直接子 tr）
• 更推荐用 tbody tr:nth-of-type(even)，它自动忽略 thead、tfoot 和非 tr 节点
• 如果表格由 JS 动态渲染，务必等 DOM 插入完成后再应用样式，否则可能因节点未就位导致序号错乱

真正难的不是记公式，而是每次写 :nth-child() 前，心里默数一遍父元素下所有直接子节点的顺序——哪怕只是 <!-- 注释 --> 或换行符产生的空白文本节点，都参与计数。