:nth-last-child 的真实匹配逻辑是检查元素是否为父容器中倒数第 N 个子元素（同位置，不限类型），而非倒数第 N 个同类型元素；要选倒数第 N 个某类型元素，必须用 :nth-last-of-type。
什么是 :nth-last-child 的真实匹配逻辑？
它不是“从后往前数第 N 个”，而是“检查该元素是否是其父容器中倒数第 N 个 同类型兄弟元素”。关键在“同类型”——即标签名必须一致。比如 <div> 不会和 <p> 参与同一个计数序列。
常见误解是以为 div:nth-last-child(2) 能选中倒数第二个 <div>，实际它只匹配“倒数第二个子元素恰好是 <div>”的场景。如果倒数第二个子元素是 <p>，哪怕倒数第一个是 <div>，这个 <div> 也不会被选中。
:nth-last-child(1) 和 :last-child 有区别吗？
没有功能区别，:nth-last-child(1) 等价于 :last-child，但语义更明确、可读性略差。不过它们都只看位置，不看元素类型：
-
:last-child→ 匹配父容器中最后一个子元素（无论是什么标签） -
div:last-child→ 匹配父容器中最后一个子元素且该元素是<div> -
div:nth-last-child(1)→ 同上，但写法冗余；仅当需要统一用:nth-系列写法（如配合(2n)）时才有意义
怎么真正选中“倒数第 N 个 <div>”？
靠 :nth-last-child 做不到，必须换思路：先用 :nth-of-type 或 JavaScript。CSS 原生无“倒数第 N 个某类型”的伪类，:nth-last-of-type 是唯一解：
立即学习“前端免费学习笔记（深入）”；
-
div:nth-last-of-type(2)→ 正确选中倒数第二个<div>（忽略中间夹杂的<p>、<span>等） - 注意：
:nth-last-of-type也不看顺序，只按同类型元素倒序编号 - 如果 DOM 是
<div><p><div><div>，那么三个<div>的:nth-last-of-type值分别是3、2、1 - 兼容性：IE9+ 支持，现代浏览器无压力
容易踩的坑：负号、公式、空格和括号
:nth-last-child 的参数写法极敏感，错一个字符就失效：
- 公式中不能省略乘号：
2n+1✅，2n+1写成2n+1没问题，但n+1❌（必须写1n+1或直接n+1，其实n+1是允许的，但2n+1中的2n不能写成2 n） - 空格是非法的：
:nth-last-child( 2 )❌，:nth-last-child(2)✅ - 负系数要加括号：
:nth-last-child(-n+3)✅，:nth-last-child(-n+3)不加括号也行，但-2n+1必须写全，不能简写为2n-1（那是正向） - 错误示例：
div:nth-last-child(-1)永远不匹配——因为不存在“倒数第 -1 个子元素”
真正难的不是语法，而是想清楚你要选的是“位置上的倒数第 N”，还是“类型上的倒数第 N”。前者用 :nth-last-child，后者必须切到 :nth-last-of-type —— 这个切换点，很多人调试半小时才发现没对上。
