CSS中:nth-last-of-type()只匹配元素类型，无视class；按类名倒序选需用JS或现代CSS的:is(.cls):nth-last-child(n)，但后者仅适用于目标位置固定场景。
用 :nth-last-of-type() 不能选类名，这是最大误区
很多人一上来就试 :nth-last-of-type(2)，发现完全不生效——因为这个伪类只看元素类型（比如 div、span），完全忽略 class。哪怕父容器里只有 5 个 div.item，div:nth-last-of-type(2) 选的仍是倒数第二个 div，和它有没有 item 类毫无关系。
所以，想按类名倒序筛选，必须换思路：
- 要么用 JavaScript 配合
document.querySelectorAll()+Array.from()+slice() - 要么在 CSS 里改用
:nth-last-child()+ 类选择器组合，但前提是目标元素在 DOM 顺序中“位置可预测”
用 :nth-last-child() + 类名组合的前提条件
这个写法形如 .parent > .target:nth-last-child(3)，但它能生效，依赖两个硬性条件：
-
.target必须是其父级的第 N 个子元素（从后往前数），不能中间插着其他兄弟节点 - 所有干扰兄弟节点（比如文字节点、注释、其他 class 的
div）都会破坏序号计算
例如：
<div class="parent"> <div class="other"></div> <div class="target">A</div> <div class="target">B</div> <div class="target">C</div> </div>
此时 .target:nth-last-child(1) 不会匹配 C——因为 C 是倒数第 1 个子元素，但它的父级最后一个子元素确实是它；而 .target:nth-last-child(2) 也匹配不到 B，因为 B 是倒数第 2 个子元素，但它的兄弟中没有其他 .target 占位，所以它实际是倒数第 2 个子元素，满足条件。但只要加一个 在最后，整个序号就全乱了。
真正可靠的方案：CSS 里用 :is() + :nth-last-child() 组合（现代浏览器）
如果你的环境支持 :is()（Chrome 100+、Firefox 100+、Safari 15.4+），可以用这个技巧绕过“只能看标签”的限制：
.parent > :is(.target):nth-last-child(2)
它等价于：“父元素下，倒数第 2 个子元素，且该子元素带有 .target 类”。注意两点：
- 必须写成
:is(.target)，不能省略括号，也不能写成:is(.target, .target)这种冗余形式 - 这个选择器只匹配“倒数第 2 个子元素本身”，不会向上或向下找；如果那个位置的元素没加
.target，就不匹配，不会退而求其次 - 它不解决“倒数第 N 个
.target”的通用问题（比如父级有 10 个.target，要选倒数第 3 个），只适用于你知道目标在整体子元素中排第几的情况
需要精确选“倒数第 N 个带某 class 的元素”？只能靠 JS
CSS 没有原生的“倒数第 N 个匹配某类的选择器”。最简健壮的做法是：
const targets = document.querySelectorAll('.parent .target');
const target = targets[targets.length - N]; // N 从 1 开始计数
如果 N 是变量，或者要动态响应 DOM 变化，建议封装成函数：
- 用
Array.from(targets).at(-N)更语义清晰（at()支持负索引） - 注意
querySelectorAll返回的是静态 NodeList，插入新节点后需重新查询 - 若涉及大量元素或频繁操作，避免在循环里反复调用
querySelectorAll
别指望纯 CSS 能搞定这个需求——不是写法太复杂，而是规范上就没提供这个能力。强行用各种 nth 组合去凑，最后维护起来比一行 JS 还费劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
