: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
（因为整个子列表倒数第 2 个是 B）
• li:nth-last-of-type(2) → 匹配
• B
（li 类型共 3 个，倒数第 2 个是 B）
• li:nth-last-of-type(1) → 匹配
• D
（倒数第一个 li）
• 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 就容易漏选或误选。