结论：用 li:nth-last-of-type(1) 能稳稳选中列表最后一项，但前提是父容器中所有目标元素标签名一致且无其他类型节点干扰；它只统计同类型（li）元素的倒序位置，无视 div、span、text 节点等非 li 兄弟，比 nth-last-child 更鲁棒。
直接说结论：用 li:nth-last-of-type(1) 能稳稳选中列表最后一项，但前提是父容器里所有目标元素标签名一致、没有混入其他类型节点——否则它根本不会匹配你“以为的最后一个”。
为什么 li:nth-last-of-type(2) 经常不生效
不是选择器写错了，是 DOM 结构没你想得那么干净：
- 父容器里实际混了
div、span或注释节点，li:nth-last-of-type(2)只数li，其它全忽略 - React/Vue 中用了
v-if或{condition && <li>}</li>，导致渲染后li数量不固定，甚至出现li和div交替 - HTML 源码里有换行/缩进，浏览器解析出 Text 节点，让
li在子元素序列里位置偏移（但nth-last-of-type不受 Text 节点影响，这点比nth-last-child更鲁棒）
nth-last-of-type 和 nth-last-child 到底该用谁
看你要控制的是「同类末尾」还是「结构末尾」：
- 想给「列表最后一项加 bottom margin」→ 用
li:nth-last-of-type(1)（只认li，不怕中间插个div） - 想给「整个容器倒数第三个子元素加边框」，不管它是什么标签→ 用
:nth-last-child(3) - 如果父容器只有
li，两者效果一样；一旦混入其它标签，nth-last-child很可能选空
动态列表中怎么写才不容易翻车
框架渲染本身不破坏选择器逻辑，但容易放大结构不一致的问题：
- 服务端渲染（SSR）时生成 5 个
li，客户端 hydration 后多插入一个li→nth-last-of-type(1)会瞬间切换目标，造成样式跳变 - 避免在条件渲染分支里返回不同标签：别写
{loading ? <div>...</div> : <li>...</li>}，统一用li+class控制显隐 - 需要精确控制末尾几项时，优先用
li:nth-last-of-type(n+2)（从倒数第二项起全部命中），而不是nth-last-of-type(-n+2)（那是前两项）
最常被忽略的一点：伪类选择器不关心 class、id、style，只死磕标签名和父级关系。哪怕你给元素加了 class="last-item"，li:nth-last-of-type(1) 也只看它是不是最后一个 li——别的都算干扰项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
