li:nth-last-child(2)不生效是因为它匹配倒数第二个子元素且必须是li，若父容器含其他节点（如div、注释、空格文本）则序号偏移；应改用li:nth-last-of-type(2)精准匹配所有li中倒数第二个。
为什么 li:nth-last-child(2) 经常不生效
它不是“选倒数第二个 li”，而是“选父元素倒数第二个子元素，且这个子元素必须是 li”。只要父容器里存在其他元素节点（比如 <div>、<code><p></p>）、HTML 注释（<!-- -->）甚至换行缩进产生的文本节点，倒数序号就会被挤偏。
常见现象：写好 li:nth-last-child(2) 却没任何样式，打开开发者工具看 ul > *，发现倒数第二个子节点其实是注释或空格文本——那它当然不匹配。
- 用控制台执行
parent.children查真实子元素（只含 element 节点，不含文本/注释） - 若结构不可控（CMS 输出、JS 动态插入），直接改用
li:nth-last-of-type(2) -
display: none的元素仍参与计数；visibility: hidden也一样
什么时候该换成 :nth-last-of-type()
当你真正想表达的是“所有 li 中倒数第二个”，而不是“整个 DOM 子序列中倒数第二位碰巧是 li”，就必须换。
例如这个结构：
立即学习“前端免费学习笔记（深入）”；
<ul> <li>一</li> <div>分隔</div> <li>二</li> <li>三</li> </ul>
其中：li:nth-last-child(2) 不匹配任何 li（倒数第二个子元素是 <li>二</li>，但它在子节点中排第 3 位）li:nth-last-of-type(2) 稳定命中 “二”（所有 li 共 3 个，倒数第 2 个就是它）
-
:nth-last-child()看位置（所有子元素统一倒序编号） -
:nth-last-of-type()看类型（只对同标签名兄弟排序倒数） - 两者在纯
ul > li结构下效果一致，但只要混入其他节点，结果就可能完全不同
怎么用 -n+3 选最后三个元素
li:nth-last-child(-n+3) 不是“从倒数第 3 个开始”，而是“取倒数第 1、2、3 个子元素”——公式中 n 从 0 开始代入：-0+3=3、-1+3=2、-2+3=1，到 n=3 时得 0，无效。
典型用途：
- 隐藏末尾三项：
li:nth-last-child(-n+3) { display: none; } - 清除最后三条的下边框（如果原样式用
border-bottom）：li:nth-last-child(-n+3) { border-bottom: none; } - 优先级注意：若基础样式是
ul li { border-bottom: 1px solid #ccc; }，新规则至少得写成ul li:nth-last-child(-n+3)才能覆盖
大量动态列表下要小心性能
浏览器计算 :nth-last-child() 时需遍历整个父元素子树来确定每个子元素的倒数位置。DOM 超过 200 个子节点，且频繁增删（如聊天列表、实时日志流），可能触发重排或拖慢样式计算。
这不是理论风险——2026 年多个前端监控平台已观测到该选择器在长列表滚动场景下的 CPU 尖峰。
- 静态结构（如导航菜单）放心用
- 动态高频更新的容器，优先考虑 JS 控制 class 或服务端预渲染
- 别嵌套太深：
div ul li:nth-last-child(2)比li:nth-last-child(2)多一次祖先匹配开销
