li:nth-last-child(1)不生效是因为它匹配父元素倒数第1个子节点且必须是li，而换行、注释等#text节点会干扰位置；应优先用li:nth-last-of-type(1)按语义匹配最后一个li。
为什么li:nth-last-child(1)经常不生效
它不是按“你看到的最后一个 li”来匹配，而是数父元素所有子节点（包括 #text、<!-- -->、<div> 等）倒数第 1 个位置。只要那个位置不是 <code>li，规则就失效。
常见干扰源：
- Vuex/React 模板里
<!--v-if-->或{/* */}注释节点 - HTML 换行缩进产生的空白
#text节点 - 动态插入的加载提示
<div class="loading"></div> - 服务端渲染注入的空格或注释
验证方法：打开浏览器 Elements 面板，展开父容器，灰色文字就是 #text，绿色是注释——必须手动数真实子节点顺序，不能靠肉眼。
nth-last-child(n) 和 nth-last-of-type(n) 到底选哪个
关键区别在计数范围：:nth-last-child(n) 数所有同级子节点；:nth-last-of-type(n) 只数同标签名的兄弟节点。
立即学习“前端免费学习笔记（深入）”；
适用场景：
- 要锁死 DOM 物理位置（比如做网格对齐、动画序列），用
:nth-last-child(n) - 目标是语义位置（“最后一个按钮”“倒数第三个列表项”），一律优先用
:nth-last-of-type(n) - Vue/React 动态列表中，只要存在条件渲染、slot 插入或错误边界组件，
:nth-last-of-type(n)几乎总是更可靠
示例对比：li:nth-last-child(1) 匹配失败时，li:nth-last-of-type(1) 往往能立刻生效。
怎么写才能稳定选中最后 N 个元素
:nth-last-child(-n+N) 是标准写法，但它只在目标元素连续排在末尾且类型一致时才有效。一旦中间穿插其他节点，就会漏掉。
更健壮的写法是结合通用兄弟选择器：
- 选最后 3 个
li：li:nth-last-of-type(3), li:nth-last-of-type(3) ~ li - 选最后 3 个任意子元素：
:nth-last-child(-n+3)（但需确认结构干净） - 避免写
:nth-last-child(1,2,3)—— CSS 不支持逗号分隔多个值
注意：-n+3 中的 n 是变量，代入 0、1、2… 后得到位置 3、2、1，不是字面意思的“减 n 加 3”。
容易被忽略的兼容性与性能问题
:nth-last-child() 在 IE9+ 和所有现代浏览器中可用，不存在兼容断层，但有两个隐性成本：
- 它是结构性伪类，匹配时需遍历整个父元素子树；父容器下有数百个子节点且频繁增删时，可能拖慢样式计算
- 表达式如
:nth-last-child(2n+1)在大量元素上会触发更多匹配计算，比静态数字略重 -
:nth-last-child(0)或:nth-last-child(-1)完全无效，浏览器直接忽略该规则，不会报错也不会 fallback
真正麻烦的是结构不可控——哪怕你写了 li:nth-last-of-type(-n+3)，如果后端模板偷偷塞了个 <script></script> 标签在 ul 末尾，它仍会参与计数，只是不影响 li 类型内倒序。这点很多人没意识到。
