:nth-last-child选不到元素的根本原因是它只匹配父元素倒数第N个且类型相同的子元素，而非视觉上倒数第N个满足条件的元素；其位置基于所有子元素总序列计算，遇类型混排即失效。
为什么 :nth-last-child 有时选不到你想要的元素
根本原因在于它只匹配「是其父元素倒数第 N 个子元素」且「类型匹配」的元素，而不是「在视觉上倒数第 N 个满足某条件的元素」。比如父容器里有 <div>、<p>、<span> 混排，p:nth-last-child(2) 只会命中那个恰好位于倒数第二个位置的 <p> —— 如果倒数第二个是 <span>，那就什么也不选。
:nth-last-child(n) 的参数写法和常见陷阱
括号内支持整数、表达式（如 2n+1）、关键字（odd/even），但要注意：数值从 1 开始计数，不是 0；负数不合法；n 是整数变量，会代入 0,1,2,… 计算实际位置。
-
:nth-last-child(1)→ 倒数第一个子元素（等价于:last-child） -
:nth-last-child(-n+3)→ 倒数第 1、2、3 个（即最后三个），但仅当它们是同类型元素时才生效 -
:nth-last-child(2n)→ 倒数第 2、4、6… 个子元素（注意：是从末尾往前数的偶数位，不是文档中所有偶数位置元素） - 误写成
:nth-last-child(0)或:nth-last-child(-1)→ 完全无效，浏览器忽略该规则
和 :nth-last-of-type 的关键区别在哪
这是最常混淆的点：:nth-last-child 看的是「子元素总序列里的位置」，:nth-last-of-type 看的是「同类型元素在该类型中的倒序位置」。例如：
<ul> <li>A</li> <li>B</li> <p>C</p> <li>D</li> </ul>
对这个结构：
立即学习“前端免费学习笔记（深入）”；
-
li:nth-last-child(2)→ 匹配<li>B</li>（因为整个子列表倒数第 2 个是 B） -
li:nth-last-of-type(2)→ 匹配<li>B</li>（li 类型共 3 个，倒数第 2 个是 B） -
li:nth-last-of-type(1)→ 匹配<li>D</li>（倒数第一个 li） -
li:nth-last-child(1)→ 不匹配任何元素（倒数第一个子元素是<li>D</li>？不对，是<p>后面那个<li>—— 等等，上面示例里倒数第一个确实是<li>D</li>，所以它会被选中）
真正容易翻车的是中间夹杂其他标签的情况：一旦类型穿插，:nth-last-child 的位置就完全脱离你的直觉预期。
实际用例：给表格最后三行加背景色，但只影响 <tr>
目标明确：不管表头 <thead> 有没有、有没有 <tbody> 包裹，只要最终渲染出的 <tr> 是倒数第 1–3 个，就加样式。这时必须用 :nth-last-of-type，否则如果最后一行是 <tfoot><tr>…</tr></tfoot>，:nth-last-child 就会失效。
tr:nth-last-of-type(-n+3) {
background-color: #f8f9fa;
}
但如果确定所有 <tr> 都在同一个父容器下、且中间没有其他标签干扰，:nth-last-child 更轻量，解析更快。不过这种“确定”在真实项目里往往站不住脚 —— DOM 动态插入、框架生成、SSR/CSR 差异都可能悄悄打破前提。
真正要小心的不是语法，而是你默认的“父容器干净”假设。一有动态内容或组件封装，:nth-last-child 就容易漏选或误选。
