:nth-last-child 不生效的根本原因是选择器未匹配目标元素的真实父级，它按父容器所有子节点倒序计数且不限类型；混入其他元素或隐藏节点（display: none）会干扰序号计算。
为什么 :nth-last-child 有时完全不生效？
根本原因通常是选择器没匹配到目标元素的「真实父级」。比如你写 ul li:nth-last-child(2)，但实际 HTML 中 li 的父元素是 div（比如用了 React 的 Fragment 或服务端模板包裹），那这个伪类就查无此子——它只看直接父容器里的子元素顺序，且只对同类型兄弟元素计数。
- 必须确保目标元素和同级兄弟是同一标签（如全是
li），否则:nth-last-child按所有子节点算，不限类型 - 如果中间夹了
div、文本节点或注释，它们都算「子节点」，会干扰序号计算 - 用浏览器开发者工具的「Elements」面板右键「Scroll into view」确认选中的是否真是你要的那个
li
:nth-last-child(n) 和 :nth-last-of-type(n) 到底该用哪个？
前者按父容器下所有子节点倒序编号（li、div、p 全算），后者只统计同标签名的兄弟（比如只数 li）。如果你列表里混有其他元素，或者想稳稳匹配最后一个 li，优先用 :nth-last-of-type。
-
ol li:nth-last-child(1)→ 匹配父容器中「最后一个子节点且是li」，要求它必须是末尾元素 -
ol li:nth-last-of-type(1)→ 匹配「所有li中倒数第一个」，不管后面还有没有div - 动态渲染场景（如 Vue/React 列表）中，
:nth-last-of-type更可靠，因为框架可能插入占位节点
怎么用 :nth-last-child 精确匹配倒数第 2、3、n 个？
语法是 :nth-last-child(an+b)，其中 a 是步长，b 是偏移。倒数第 n 个最简单写法就是 :nth-last-child(n)（注意不是 (-n)）。
- 倒数第 2 个：
:nth-last-child(2) - 倒数第 3 个：
:nth-last-child(3) - 倒数第 n 个（变量）：CSS 不支持变量代入，需预设或用 JS 注入样式
- 常见误写：
:nth-last-child(-n+2)是「最后 2 个」，不是「倒数第 2 个」；别混淆范围匹配和单点匹配
配合 :not() 排除最后一项时要注意什么？
比如想给除最后一项外的所有 li 加右边框：li:not(:nth-last-child(1)) { border-right: 1px solid #ccc; }。这看起来合理，但若列表只有 1 个 li，整个规则失效——因为 :nth-last-child(1) 成立，:not() 就把它排除了，结果没元素匹配。
立即学习“前端免费学习笔记（深入）”；
- 更健壮的写法是正向匹配前 N−1 个：
li:nth-last-child(n+2)（即「从倒数第 2 个开始往前所有」） - 如果要兼容空列表或单元素列表，建议加一层容器判断，比如
.list:has(> li:nth-child(2)) li:nth-last-child(n+2)（需现代浏览器支持:has） - 老项目慎用
:not(:nth-last-child(1))，IE 完全不支持:not嵌套伪类
真正容易被忽略的是「文档流中不可见节点」的影响——比如 display: none 的兄弟元素仍参与 :nth-last-child 计数，而 visibility: hidden 的则会。调试时得切到「Computed」标签看最终生效的 display 值。
