:nth-last-child 选不到元素的根本原因是它只匹配父元素倒数第 N 个且类型相同的子元素，而非视觉上倒数第 N 个满足条件的元素；其位置基于所有子元素总序列计算，遇类型混排即失效。
为什么 :nth-last-child 有时选不到你想要的元素
根本原因在于它只匹配「是其父元素倒数第 N 个子元素」且「类型匹配」的元素，而不是「在视觉上倒数第 N 个满足某条件的元素」。比如父容器里有
、
和
实际用例：给表格最后三行加背景色，但只影响
、p:nth-last-child(2) 只会命中那个恰好位于倒数第二个位置的
—— 如果倒数第二个是 :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 看的是「同类型元素在该类型中的倒序位置」。例如：
- A
- B
C
立即学习 “ 前端免费学习笔记（深入）”；
- D
对这个结构：
-
li:nth-last-child(2)→ 匹配- B
-
li:nth-last-of-type(2)→ 匹配- B
-
li:nth-last-of-type(1)→ 匹配- D
-
li:nth-last-child(1)→ 不匹配任何元素（倒数第一个子元素是- D
- D
真正容易翻车的是中间夹杂其他标签的情况：一旦类型穿插，:nth-last-child 的位置就完全脱离你的直觉预期。
实际用例：给表格最后三行加背景色，但只影响
目标明确：不管表头
有没有、有没有
包裹，只要最终渲染出的
是倒数第 1–3 个，就加样式。这时必须用 :nth-last-of-type，否则如果最后一行是
……
，:nth-last-child 就会失效。
tr:nth-last-of-type(-n+3) {background-color: #f8f9fa;}
但如果确定所有
都在同一个父容器下、且中间没有其他标签干扰，:nth-last-child 更轻量，解析更快。不过这种“确定”在真实项目里往往站不住脚 —— DOM 动态插入、框架生成、SSR/CSR 差异都可能悄悄打破前提。
真正要小心的不是语法，而是你默认的“父容器干净”假设。一有动态内容或组件封装，:nth-last-child 就容易漏选或误选。
目标明确：不管表头
包裹，只要最终渲染出的
是倒数第 1–3 个，就加样式。这时必须用 :nth-last-of-type，否则如果最后一行是
……
，:nth-last-child 就会失效。
tr:nth-last-of-type(-n+3) {background-color: #f8f9fa;}
但如果确定所有
都在同一个父容器下、且中间没有其他标签干扰，:nth-last-child 更轻量，解析更快。不过这种“确定”在真实项目里往往站不住脚 —— DOM 动态插入、框架生成、SSR/CSR 差异都可能悄悄打破前提。
真正要小心的不是语法，而是你默认的“父容器干净”假设。一有动态内容或组件封装，:nth-last-child 就容易漏选或误选。
