:nth-last-child(N)匹配父元素下倒数第N个子元素且类型必须为目标标签，而非倒数第N个目标标签；易因注释、空白文本等非目标节点干扰失效，此时应改用:nth-last-of-type(N)。
直接写 :nth-last-child(N) 就能定位倒数第 N 个子元素
它匹配的是父元素下「所有子元素中倒数第 N 个」，且该元素必须是目标类型（比如你写了 li:nth-last-child(2)，那这个倒数第二个子元素还得恰好是 li）。不是“倒数第 N 个 li”，而是“倒数第 N 个子元素，且是 li”。
常见误用：li:nth-last-child(-n+2) 会选中最后两个 li（如果它们位置刚好是倒数第 1 和第 2），但这是错的意图——你要的只是唯一一个倒数第二，不是范围。
-
:nth-last-child(1)→ 最后一个子元素（类型匹配时） -
:nth-last-child(2)→ 倒数第二个子元素（类型匹配时） -
:nth-last-child(3)→ 倒数第三个子元素（类型匹配时）
为什么 :nth-last-child(2) 经常不生效
最常踩的坑是：父容器里混入了非目标标签、注释或文本节点。浏览器会把 <div>、<code><!-- 注释 -->、甚至换行缩进产生的空白文本节点，都算作子节点参与计数——但它们不会被 li:nth-last-child(2) 匹配，因为类型不符。
例如这个结构：
立即学习“前端免费学习笔记（深入）”；
<ul> <li>一</li> <li>二</li> <!-- 分隔 --> <li>三</li> <li>四</li> </ul>
此时 ul li:nth-last-child(2) 不会命中任何 li，因为倒数第二个子元素是注释节点，不是 li。
- 用浏览器开发者工具检查
ul > *，数清真实子节点顺序和类型 - 若父容器结构不可控，优先改用
li:nth-last-of-type(2) -
display: none的元素仍参与计数；hidden属性也一样
什么时候该换成 :nth-last-of-type(N)
当你真正想选的是「倒数第 N 个同类型兄弟元素」，而不是「倒数第 N 个子元素中碰巧是某类型」，就该换。
继续上面的例子：li:nth-last-of-type(2) 会稳定命中 “三”，因为它先筛选出全部 li（共 4 个），再从这组里倒数取第 2 个。
-
:nth-last-child(N)看位置（所有子节点统一倒序编号） -
:nth-last-of-type(N)看类型（只对同标签名的兄弟排序倒数） - 两者在纯
ul > li结构下效果一致，但只要混入其他节点，结果就可能完全不同 - 兼容性完全相同：IE9+ 全支持，无需前缀
动态列表或 JS 渲染时要注意 DOM 真实存在
CSS 伪类不预测、不占位。如果初始 DOM 中只有 1 个 li，那 li:nth-last-child(2) 永远不会触发样式，哪怕后续 JS 插入了更多项——样式规则本身没问题，只是条件未满足。
- Vue/React 中，确保插入新节点后，父容器子节点总数 ≥ N
- 用
:nth-last-child(-n+3)高亮末尾三项是更鲁棒的调试方式，比猜单个数字更可靠 - 别在动画或 hover 规则里嵌套多层
:nth-last-child，旧版 Safari 对这类组合解析不稳定
实际使用时，最易被忽略的是：你以为在数 li，其实浏览器在数所有子节点。定位失效往往不是语法问题，而是对 DOM 树真实结构缺乏验证。
