:nth-child(n) 匹配父元素下正向第n个子元素且类型必须匹配；:nth-last-child(n) 为倒数第n个；精准按同类型序号选应用:nth-of-type(n)，因二者计数逻辑不同。

nth-child(n) 匹配的是“正向第 n 个子元素”，且必须是同类型

很多人误以为 nth-child(2) 就是选中第二个 div，其实它选的是父元素下**所有子元素中正数第 2 个**，且这个位置上的元素**恰好是目标标签**。如果第 2 个子元素是 p，那 div:nth-child(2) 就不会匹配任何东西。

常见错误现象：

ul li:nth-child(2) { color: red; }

• nth-child(2n) 表示所有偶数位置的子元素（2、4、6…），不管它们是不是 li
• 要确保匹配稳定，最好让目标元素在 DOM 中连续、无干扰兄弟节点
• 若父容器内混排多种标签，nth-child 很难精准控制，此时应考虑加 class 或改用 nth-of-type

nth-last-child(n) 是 nth-child 的反向版本，从末尾倒数

nth-last-child(1) 等价于 :last-child，nth-last-child(2) 是倒数第二个子元素——同样要求该位置上的元素类型匹配选择器前缀。

典型使用场景：给最后两个菜单项加不同边距、为表格最后三行设背景色、响应式中隐藏倒数 N 个项。

• li:nth-last-child(-n+3) 可以选中最后三个 li（前提是它们正好占据最后三个子元素位置）
• 和 nth-child 一样，它不关心元素类型是否“同类”，只看位置；如果倒数第 2 个是 footer，那 li:nth-last-child(2) 仍不生效
• 注意负号和括号顺序：-n+3 表示“从倒数第 3 个开始往前所有”，而 n+3 在 nth-last-child 中是“从正数第 3 个开始往后”，容易混淆

真正按“同类型第几个”来选，该用 nth-of-type

如果你的目标是“第二个 img 元素”，不管它前面有多少 div、p、注释或空白，应该用 img:nth-of-type(2)，而不是 img:nth-child(2)。

nth-of-type 和 nth-last-of-type 才是按标签名分组计数的，更符合直觉。但它们也有代价：

• 无法跨类型做间隔奇偶控制（比如“所有图片和视频交替高亮”，这时还得回到 nth-child + 统一 wrapper）
• IE8 不支持 nth-of-type，而 nth-child 在 IE9+ 才可用；两者都不兼容 IE8 及以下
• 性能上差异极小，现代浏览器优化得很好，不用刻意回避

调试时最容易被忽略的细节

用浏览器开发者工具检查时，:nth-child 类选择器的样式可能“明明写了却没生效”，原因往往不是语法错，而是 DOM 结构比你想象的复杂。

• HTML 中的换行和空格会生成 Text 节点，在某些文档模式下也被算作子元素
• Vue/React 渲染时插入的注释（如 ）也会参与 nth-child 计数
• 用 element.children（只含 Element 节点）对比 element.childNodes（含 Text/Comment），就能确认实际子元素数量和类型分布

遇到不生效，先右键检查目标元素 → 查看“Parent”下的直接子节点构成，比反复改 CSS 更快定位问题。