:nth-last-child(n)只按DOM子节点位置倒序匹配，不区分类型，易受文本节点、注释等干扰；应优先用:nth-last-of-type(n)精准匹配同类型元素。
:nth-last-child(n) 是唯一能直接选中“倒数第 N 个子节点”的 CSS3 选择器，但它只认位置，不认标签类型——只要目标元素在父容器中是倒数第 N 个子节点（不管它是 div、p 还是文本节点），就能命中。
为什么 :nth-last-child(n) 有时选不到你想要的元素
它把所有子节点（包括换行、空格生成的 Text 节点）都算进去。比如 HTML 中写成：
<ul> <li>A</li> <li>B</li> <li>C</li> </ul>
实际 DOM 子节点数可能是 7 个：换行符、li、换行符、li……所以 li:nth-last-child(1) 可能根本匹配不上任何 li。
- 用浏览器开发者工具的「Elements」面板右键「Reveal in Elements panel」，展开看真实子节点结构
- 若父容器内有非目标标签（如
hr、script）或注释，它们也会占用序号 - 想忽略干扰，优先改用
:nth-last-of-type(n)（仅对同标签计数）
:nth-last-child(-n+3) 真正匹配的是哪几个
这不是“倒数前 3 个”，而是“从倒数第 3 个开始，一直往前到第一个”——即倒数第 1、2、3 个子节点。公式 -n+3 代入 n=1,2,3 得出位置 2、1、0，但位置必须 ≥1，所以有效结果是 1、2、3。
立即学习“前端免费学习笔记（深入）”；
-
li:nth-last-child(-n+3)→ 倒数第 1、2、3 个li元素（前提是它们恰好也是倒数第 1/2/3 个子节点） - 如果只想确保选中最后 3 个
li，不管中间有没有其他节点，得用：li:nth-last-of-type(-n+3) -
li:nth-last-child(n+3)表示“从倒数第 3 个开始往后的所有子节点”，即倒数第 3、4、5……个，不是“最后 3 个”
如何可靠地选中“最后 N 个同类型元素”
当目标是 li、tr 或 button 这类有固定标签的元素时，:nth-last-of-type() 比 :nth-last-child() 更可控，因为它自动跳过其他类型节点。
-
tr:nth-last-of-type(1)一定命中<tbody>里最后一个tr，哪怕后面还有<tfoot><tr></tr></tfoot> -
button:nth-last-of-type(-n+2)选中最后两个button，不受中间span或注释影响 - IE9+ 全支持
:nth-last-of-type()，无需降级方案 - 注意：
n必须是正整数或合法表达式；0、负数、非整数结果都会被浏览器静默忽略
真正容易被忽略的点是：DOM 中看不见的节点（换行、空格、注释）会改变 :nth-last-child() 的计数基准，而开发者往往只盯着 HTML 源码缩进看——建议先用 DevTools 确认真实子节点构成，再决定用 child 还是 of-type。
