li:nth-last-child(-n+3) 仅匹配父元素倒数第1~3个子元素中为li的元素，计数包含所有子节点；而li:nth-last-of-type(-n+3) 才真正选择最后三个li元素，仅统计同类型兄弟。
li:nth-last-child(-n+3) 能稳定选中最后三个 li，但前提是它们在父容器中**连续占据最后三个子元素位置**；一旦中间夹杂其他标签（如 div、span 或注释节点），就会失效。
为什么 nth-last-child(-n+3) 不等于“最后三个同类型元素”
它从父元素最后一个子元素开始倒数，匹配满足 -n+3 ≥ 1 的所有位置（即倒数第1、第2、第3个），但只对**恰好落在这些位置上的元素**生效。计数对象是全部子节点，不跳过非目标类型。
- 如果
ul最后三个子节点是li、li、li→ 全部命中 - 如果最后三个是
li、li、footer→ 只有前两个li匹配li:nth-last-child(1)和li:nth-last-child(2)，第三个不匹配 - 如果最后一个是
span，那li:nth-last-child(1)就完全不会生效
真正想选“最后三个 li”，该用 nth-last-of-type
当父容器内混排多种标签，或存在不可控的 DOM 干扰（比如 SSR 渲染插入的注释、空文本节点），nth-last-of-type 才是更鲁棒的选择——它只统计同类型兄弟元素的位置。
-
li:nth-last-of-type(1)：最后一个li，不管前面有多少div或p -
li:nth-last-of-type(-n+3)：最后三个li，无论它们在 DOM 中是否连续 - 注意：
nth-last-of-type不支持伪类组合（如:not()后接它），且 IE 不支持
调试时最容易忽略的两点
浏览器开发者工具里看“Computed”样式时，nth-last-child 规则可能显示为“已匹配”，但实际没效果——原因往往藏在 DOM 结构里。
- 检查父元素的
childNodes（不只是children）：用console.log(el.childNodes)看是否有空白文本节点或注释干扰位置计算 -
-n+3中的空格不是必须的，但写成-n + 3更易读；写成n+3或-n+ 3（带多余空格）在部分旧版浏览器中会解析失败 - 若需兼容 IE，只能放弃
nth-last-child，改用 JS 动态加 class 或服务端渲染时预设 class
真正难的不是写对公式，而是判断当前场景下该信位置（nth-last-child），还是信类型（nth-last-of-type）。DOM 结构越不可控，后者越值得优先考虑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
