:nth-last-child() 失效是因为它按父元素所有子节点（含注释、空格等）倒序计数，而非仅同类型元素；应优先用 :nth-last-of-type() 或检查真实 DOM 结构。
nth-last-child() 定位失效：为什么最后一个元素没被选中
常见现象是写 li:nth-last-child(1) 却没生效，尤其当 li 前面有其他类型兄弟节点（比如 p 或注释节点）时。因为 :nth-last-child() 数的是「同级所有兄弟元素」的倒序位置，不是只数同类型元素。
它和 :nth-last-of-type() 的关键区别就在这儿：前者看位置，后者看类型。
- 如果父容器是
<ul></ul>，子元素全是<li>，那li:nth-last-child(1)和li:nth-last-of-type(1)效果一致 - 但只要混入
<div>、<code><span></span>甚至 HTML 注释<!-- ... -->，位置序号就全变了 - 浏览器会把注释节点也计入兄弟节点总数——这点极易被忽略
- 用浏览器开发者工具的「Elements」面板右键 → «Break on» → «Subtree modifications» 可观察真实 DOM 子节点构成
- 若需稳定匹配倒数第 N 个
li，优先改用li:nth-last-of-type(n) - 若必须用
:nth-last-child()，先用parent > *查看子节点列表，数清实际顺序 - 静态渲染页面中基本无感；SPA 中列表滚动加载 + 动态插入时，慎用它做高频率状态标记（比如「倒数三项高亮」）
- 不要和
:hover或动画连用做复杂组合选择器，某些旧版 Safari 对嵌套伪类解析不稳定 - 服务端渲染（SSR）场景下，注意 Node.js 环境的 CSS-in-JS 库（如 styled-components）对伪类的支持程度不一，部分不支持运行时解析
:nth-last-child -
-n+3表示「从倒数第 1 个开始，取连续 3 个」，等价于倒数第 1、2、3 个 - 想跳过倒数第一个、只选倒数第二和第三？用
:nth-last-child(-n+3):not(:nth-last-child(1)) - 配合
:is()可简化多类型匹配，如:is(li, div):nth-last-child(-n+2)，但注意:is()在 IE 中不支持
用 nth-last-child(n) 做“倒数第 N 个”必须确认兄弟结构
真正起作用的是「该元素在父元素所有子节点中的倒数位置」。比如一个 ul 里有 5 个子节点：<li>A</li>、<li>B</li>、<div>extra</div>、<li>C</li>、<li>D</li>，那么最后一个 li（D）其实是 :nth-last-child(1)，而 C 是 :nth-last-child(2)，B 就成了 :nth-last-child(4)。
兼容性与性能：IE9+ 支持，但别在大量动态列表里频繁依赖它
:nth-last-child() 在 IE9+、所有现代浏览器中都可用，不存在兼容断层。但它属于 CSS 选择器中的「结构性伪类」，匹配逻辑需要遍历整个父元素子树，当父容器下有数百个子节点且频繁增删时，可能触发重排或影响样式计算效率。
立即学习“前端免费学习笔记（深入）”；
调试技巧：用 :nth-last-child(-n+3) 快速高亮末尾三个元素
这是最实用的验证手段——不用猜数字，直接看效果。例如给表格最后三行加背景：tr:nth-last-child(-n+3) { background: #f0f0f0; }。只要父容器子节点总数 ≥3，就能稳稳覆盖末尾。
真正麻烦的从来不是语法记不住，而是 DOM 结构比你写的 HTML 多出一行注释、一个空格文本节点，或者一个悄悄插入的 portal 元素——它们都会让 :nth-last-child() 的计数偏移。
