:nth-last-child(1) 不生效是因为它按所有子节点（含文本、注释等）倒序计数，而非仅 li 元素；应改用 :nth-last-of-type(1) 精准匹配最后一个 li。
为什么动态列表里 :nth-last-child(1) 经常不生效
它不是按“你看到的最后一个 li”来匹配，而是按 DOM 中所有子节点（含文本节点、注释、<div> 等）倒数位置来算。Vue/React 模板里常见的 <code><!--v-if--> 注释、服务端渲染插入的空白符、甚至换行缩进产生的 #text 节点，都会参与计数。
比如一个 <ul></ul> 实际子节点顺序是：#text → <li>A</li> → <li>B</li> → <footer></footer> → #text，那 li:nth-last-child(1) 就永远匹配不到——因为倒数第一个是 #text，不是 li。
- 用浏览器 Elements 面板展开父元素，灰色文字就是
#text，绿色注释就是<!-- -->，必须手动数一遍真实子节点 -
li:nth-last-child(1)和li:last-child行为不同：:last-child只要求是最后一个子元素且类型匹配；:nth-last-child(1)也一样，但更容易被干扰节点挤掉位置 - 动态插入元素时，如果新节点插在末尾但类型不是
li（比如加载提示<div class="loading"></div>），原有li的倒数位置就全变了
:nth-last-child(n) 和 :nth-last-of-type(n) 到底该选哪个
关键看你要锁死「物理位置」还是「语义位置」。
如果目标是「不管中间夹了啥，只要它是所有 li 中倒数第 N 个」，就用 li:nth-last-of-type(n)。它自动跳过其他标签和文本节点，只在同类型兄弟中倒序计数，行为更接近 JS 的 el.querySelectorAll('li')[n-1] 或 el.children[el.children.length - n]（后者只返回元素节点）。
-
li:nth-last-of-type(1)≈ 最后一个li，哪怕它前面有<p></p>、<div> 或注释<li> <code>li:nth-last-child(1)≈ 最后一个子节点且必须是li，对结构干净度要求极高 - 在 Vue/React 动态列表中，
:nth-last-of-type几乎总是更可靠，尤其当条件渲染、slot 插入或错误边界组件可能混入额外节点时 - 真正稳定的写法是：
li:nth-last-of-type(-n+3)，它确保选中所有li中倒数前 3 个 -
-n+3中的n从 0 开始代入：n=0→3，n=1→2，n=2→1，所以覆盖倒数第 1/2/3 个 - 别写
nth-last-child(1,2,3)——CSS 不支持逗号分隔，会整个规则失效 - 如果必须用
:nth-last-child（比如做网格对齐动画），先用parent > *在控制台查清子节点构成，再手动调整数字 - 避免在
scroll或input事件里直接依赖它做样式切换；改用 class 控制（如is-last-three）更可控 - IE9+ 兼容没问题，但 IE8 及更早版本完全不支持，若需兼容得回退到 JS 计算 + class
- 服务端渲染场景下，注意 SSR 和 CSR 的 DOM 结构是否一致——比如 SSR 输出了注释，CSR 没有，会导致样式错位
怎么写表达式才能稳定选中最后 N 个元素
:nth-last-child(-n+N) 是标准写法，但它只在目标元素连续排在末尾时才有效。一旦中间穿插其他类型节点，就会漏掉。
比如想高亮最后 3 个 li，li:nth-last-child(-n+3) 实际只匹配「恰好位于倒数第 1、2、3 位的 li」，而如果倒数第 2 位是 <div>，那这个 <code>li 就被跳过了。
动态增删时要注意重排和性能
:nth-last-child 属于结构性伪类，浏览器需要遍历整个父容器子树来判断每个元素是否匹配。当列表项超过几百个、且频繁增删时，可能触发样式重计算，拖慢渲染。
最麻烦的不是语法写错，而是你以为 DOM 很干净，结果一个看不见的换行符或框架注入的注释就让整个选择器失效。动手前先打开开发者工具数一遍子节点，比反复试错快得多。
