:nth-last-child按父元素所有直接子节点（含注释、文本等）从后往前计数，先定位an+b对应的位置，再检查该位置元素是否匹配选择器类型；它不跳过非目标类型节点，与:nth-last-of-type仅计同类型元素有本质区别。
什么是 :nth-last-child 的真实计数逻辑
它不是按“倒序排列后取第N个”，而是从父容器最后一个子元素开始往前数，找到位置符合公式 an+b 的那个元素（a、b 为整数）。关键在于：所有子元素都参与计数，不管类型是否匹配选择器本身。
比如 div:nth-last-child(2) 会选中倒数第二个子元素——但前提是这个子元素恰好是 div。如果倒数第二个是 span，那这个 div 就不会被选中，哪怕它是倒数第三个。
- 计数范围是父元素的全部直接子元素（
child，不是of-type） - 匹配条件独立于计数：先定位位置，再检查该位置上的元素是否满足选择器类型
-
:nth-last-child(1)等价于:last-child，但语义更明确
:nth-last-child(2) 为什么有时不生效
最常见原因是目标元素在 DOM 中并非倒数第二个子节点。比如末尾有注释、空格文本节点、或隐藏的 script 标签，它们都算作子元素。
举个例子：
- A
- B
- C
此时 li:nth-last-child(2) 匹配不到任何 li，因为倒数第二个子元素是注释节点，倒数第一个是 结束标签前的空白文本节点（取决于 HTML 写法）。
- 用浏览器开发者工具的「Elements」面板右键 →「Edit as HTML」可看清所有子节点
- 若需忽略非元素节点，改用
:nth-last-of-type()（但仅对同类型元素有效） - 确保没有意外插入的
<div style="display:none"></div>类似占位元素
常用公式写法与对应场景
公式格式为 an+b，其中 n 从 0 开始递增生成自然数序列（0,1,2,…），结果为正整数的位置才被选中。
-
:nth-last-child(3)→ 倒数第 3 个子元素（固定位置） -
:nth-last-child(-n+3)→ 倒数前 3 个子元素（即最后三个） -
:nth-last-child(2n)→ 所有倒数偶数位的子元素（倒数第 2、4、6…个） -
:nth-last-child(2n+1)→ 所有倒数奇数位的子元素（倒数第 1、3、5…个）
注意：-n+3 中当 n=0 得 3，n=1 得 2，n=2 得 1，n=3 得 0（无效），所以只覆盖倒数 1–3 位。
和 :nth-last-of-type 的关键区别在哪
:nth-last-child 数的是“第几个子节点”，:nth-last-of-type 数的是“第几个同类型兄弟节点”。两者在混合标签结构下结果差异极大。
例如：
<section><p>Intro</p> <div>Box 1</div> <div>Box 2</div> <p>Outro</p> </section>
-
div:nth-last-child(2)→ 不匹配（倒数第二个子元素是<p>Outro</p>） -
div:nth-last-of-type(2)→ 匹配<div>Box 1</div>（因为两个div中，它是倒数第二个）
实际项目中，如果目标元素类型不唯一，又需要稳定定位末尾区域的某类元素，优先验证 DOM 结构是否干净；否则 :nth-last-of-type 更可靠，但要注意它不认 class 或属性，只看标签名。
真正难的不是写对公式，而是确认你数的“最后一个”到底是谁——浏览器不会告诉你它把注释也算进去了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
