: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; } 本意是让列表第二项变红，但如果 ul 开头有注释、空格文本节点（在某些解析模式下），或前面插了其他元素（比如 span），就可能失效——因为 nth-child 数的是所有子节点位置，不跳过非目标类型。
-
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 个项。
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
-
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 渲染时插入的注释（如
<!--v-if-->）也会参与nth-child计数 - 用
element.children（只含 Element 节点）对比element.childNodes（含 Text/Comment），就能确认实际子元素数量和类型分布
遇到不生效，先右键检查目标元素 → 查看“Parent”下的直接子节点构成，比反复改 CSS 更快定位问题。
