:nth-last-child(-n+3)选中倒数第1–3个子元素，但受文本节点等干扰；:nth-last-of-type(-n+3)则只统计同标签元素，更可靠。
直接用 :nth-last-child(-n+3) 就能选中最后三项，但前提是这些元素在父容器中必须是连续的、且位置恰好落在倒数第 1–3 位；一旦中间夹了其他标签、注释或文本节点，就会失效。
为什么 :nth-last-child(3) 不等于“最后三项”
它只匹配倒数第 3 个子元素，不是范围选择器。CSS 中没有“选中最后 N 个”的原生语法，:nth-last-child(n) 的本质是单点定位 —— 给定一个倒数位置，看那个位置上是不是目标元素。
-
:nth-last-child(1)匹配倒数第 1 个子元素 -
:nth-last-child(2)匹配倒数第 2 个子元素 -
:nth-last-child(3)匹配倒数第 3 个子元素
这三个规则单独写，浏览器会分别尝试匹配，但只要父容器子节点总数不足 3，:nth-last-child(3) 就完全不生效 —— 它不会“退而求其次”去匹配倒数第 2 或第 1 个。
:nth-last-child(-n+3) 是怎么工作的
公式 -n+3 中的 n 从 0 开始代入整数：当 n=0 → 3，n=1 → 2，n=2 → 1，所以它实际命中倒数第 1、2、3 个位置上的所有子元素（不管类型）。
立即学习“前端免费学习笔记（深入）”；
- 适用于干净结构，比如纯
<ul><li></ul> - 如果父容器里有
<div>、注释 <code><!-- -->或换行产生的#text节点，这些都算子元素，会挤占位置 - 例如：
<ul>A<div>spacer</div>B C</ul>，其中A是第 1 个子节点，<div> 是第 2 个，<code>B是第 3 个，C是第 4 个 —— 那么:nth-last-child(-n+3)实际匹配的是第 2、3、4 个子节点，也就是<div>、<code>B、C，而非全部三个<li>什么时候该换用
:nth-last-of-type()当你真正想表达的是“所有
li中倒数前三个”，而不是“DOM 中倒数前三个子节点”，就必须切到:nth-last-of-type()。-
li:nth-last-of-type(-n+3)只统计li类型的兄弟元素，自动跳过<p></p>、<div>、注释、文本节点<li>Vue/React 模板里常见的条件渲染注释（如 <code><!--v-if-->）、SSR 插入的空白符、甚至缩进空格生成的#text，都会让:nth-last-child失效，但:nth-last-of-type不受影响 - 注意：
:nth-last-of-type不识别 class 或属性，只看 HTML 标签名；它也不管display: none，只要 DOM 存在就计入计数 - 用
parent > *在控制台快速列出所有直接子节点，确认顺序 - 若原有样式是
ul li { border-bottom: 1px solid #ccc; }，新规则至少得写成ul li:nth-last-of-type(-n+2) { border-bottom: none; }才能覆盖 -
:nth-last-child和:nth-last-of-type在 IE9+ 均可用，但前者在数百子节点频繁增删时可能拖慢样式计算
别忽略真实 DOM 结构和样式优先级
在浏览器 Elements 面板里展开父容器，灰色文字是
#text节点，绿色是注释 —— 这些才是:nth-last-child真正计数的对象，不是你肉眼看到的“最后三个列表项”。 -
