nth-last-child选不到元素是因为它只匹配同级同标签的直接子元素，不识别class或内容；常见干扰包括混排标签、空白节点、伪元素及Shadow DOM限制。
nth-last-child 选不到元素？先确认父容器和子元素类型
很多人写 nth-last-child(2) 却没效果，不是语法错，而是根本没匹配上——nth-last-child 只认「同级、同标签、且是父元素的直接子元素」。它不看 class 或内容，只数 DOM 树里从末尾开始的第几个子节点。
常见错误现象：div.list > span.item:nth-last-child(1) 失效，其实是因为 div.list 里混了 p、br 或注释节点，导致最后一个 span 实际是第 4 个子节点，而非第 1 个。
- 用浏览器开发者工具「Elements」面板右键父元素 → 「Edit as HTML」，手动删掉空格/换行/注释，再试一次，常能立刻验证是否被干扰
- 如果子元素类型不统一（比如
li和div混排），改用:nth-of-type()更稳妥，但它按标签名分组计数，逻辑不同 -
nth-last-child对伪元素（如::before）无效，也不能用于 document fragment 或 Shadow DOM 内部（除非在 shadow root 中单独写）
nth-last-child(n+2) 这种写法到底选中哪些？
它不是「从倒数第 2 个开始往后所有」，而是「倒数第 2 个、倒数第 3 个、倒数第 4 个……直到倒数最后一个」——也就是排除倒数第 1 个，其余全中。公式 n+X 的含义是：从第 X 个位置开始，每轮加 1，向末尾方向延伸。
使用场景：给列表最后 N-1 项加边框，但最后一项不加；或高亮除末尾外的所有操作按钮。
立即学习“前端免费学习笔记（深入）”；
-
nth-last-child(n+3)→ 排除倒数第 1 和第 2 个，从倒数第 3 个起选中 -
nth-last-child(-n+3)→ 倒数第 1、2、3 个（即最后三项），等价于nth-last-child(1), nth-last-child(2), nth-last-child(3) - 负系数（如
-n+5）只对小范围有效；超过子元素总数时自动截断，不会报错也不会漏选
和 nth-child 对比：为什么反向定位有时更可靠？
当列表前端可能动态插入新项（比如顶部加「推荐」「广告」区块），nth-child 的序号会整体后移，原来写死的 nth-child(3) 可能突然指向错误元素；而 nth-last-child(1) 始终稳稳咬住最后一个，不受前面增删影响。
性能与兼容性：两者渲染开销一致，现代浏览器均支持到 IE9+。但注意，Sass/Less 编译时若用循环生成 nth-last-child 规则，别盲目写到 n+100——CSS 规则过多会拖慢样式计算，尤其在低端安卓 WebView 中。
- 移动端 Hybrid App 中，建议用 JS 动态加 class 替代大量
nth-last-child规则，更可控 - 服务端渲染（SSR）页面若子元素数量不确定，避免依赖具体数字（如
nth-last-child(5)），优先用nth-last-child(-n+3)这类相对表达式 - Flex/Grid 容器中，
nth-last-child仍按 DOM 顺序计算，和视觉排列顺序无关（这点常被忽略）
伪类链式调用：:nth-last-child 能和其他伪类一起用吗？
可以，但顺序和组合方式很关键。例如 li:nth-last-child(odd):hover 合法，表示「倒数奇数位的 li 在 hover 时生效」；但 li:hover:nth-last-child(odd) 在部分旧版 Safari 中不生效，因为伪类顺序不符合规范。
容易踩的坑：想同时满足「是最后一个子元素」且「有 data-active 属性」，不能写成 [data-active]:nth-last-child(1)（部分浏览器解析失败），得拆成两个条件或用 JS 补位。
- 推荐写法：
li[data-active]:nth-last-child(1)（属性选择器在前，更兼容） - 不要嵌套伪类如
:nth-last-child(:hover)—— 语法非法，浏览器直接忽略整条规则 - CSS 选择器权重不变：
li:nth-last-child(1)和li:first-child权重相同，都是 0,1,1
nth-last-child 能跨层级或响应内容变化——它只忠于静态 DOM 结构。改样式前，先用 console.dir($0.parentNode.children) 看一眼真实子节点列表，比猜快十倍。 
