:nth-last-child()从父元素最后一个子节点倒数，所有直接子元素（含div、p、文本节点等）均参与计数，不跳过任何类型或display: none元素。
nth-last-child 的计数逻辑：只看 DOM 顺序，不跳过任何子元素
:nth-last-child() 从父元素的最后一个子节点开始倒数，**所有直接子元素都参与计数**，包括 <div>、<code><p></p>、<span></span>，甚至文本节点（旧版 Safari 对空白文本节点处理不稳定）。它不关心类型，也不过滤 display: none 元素。
比如父容器内是：<h2>标题</h2>
<p>内容1</p>
<p>内容2</p>
<div>广告</div>，那么 p:nth-last-child(2) 匹配的是 <p>内容2</p>（倒数第二个子元素），而不是“倒数第二个 <p></p>”。
- 如果只想按标签类型倒数，该用
:nth-last-of-type() - 写
li:nth-last-child(2)却没生效？先检查父元素里是否真有至少两个<li>，且它们是连续的直接子元素 - IE8 及更早版本完全不支持，需确认兼容要求
参数 an+b 中的 b 必须是非负整数，否则无效
公式 an + b 中的 b 是偏移量，浏览器会代入 n = 0, 1, 2, ... 计算位置。若 b 为负（如 -n-1 或 n-2），第一个有效值可能为负数，没有对应元素，规则直接失效。
正确写法示例：
-
li:nth-last-child(-n+3)→ 倒数第 1、2、3 个（即最后三项） -
li:nth-last-child(2n+1)→ 倒数第 1、3、5… 个（倒数奇数位） -
li:nth-last-child(3n)→ 倒数第 3、6、9… 个
错误写法示例：li:nth-last-child(n-1) 或 li:nth-last-child(-n-2) —— 这些不会匹配任何元素。
和 :nth-child() 方向相反，但结构对称
:nth-child(2) 是正数第二个子元素，:nth-last-child(2) 就是倒数第二个。两者在总数量固定时互为镜像；但在动态列表中，:nth-last-child() 更稳定——比如你总想隐藏最后三项，用 li:nth-last-child(-n+3) { display: none; } 就比手动改 :nth-child() 序号靠谱得多。
- 当子元素总数变化时，
:nth-last-child(-n+3)始终作用于末尾三个位置，不依赖总数 - 但要注意：如果父元素末尾混入了非
<li>元素（如<footer></footer>），li:nth-last-child(-n+3)可能一个都不命中——因为计数对象不是<li>，而是所有子元素 - 此时应切换为
li:nth-last-of-type(-n+3)，它只统计<li>类型的倒序位置
实际调试时最常踩的坑：选择器层级或类型不匹配
写完 nav a:nth-last-child(2) 却没效果？大概率是 <a></a> 不是 <nav></nav> 的直接子元素，中间嵌了 <div> 或 <code><ul></ul>。这个选择器**只对直接子元素生效**。
- 检查 DOM 结构：用浏览器开发者工具高亮父元素，确认目标元素确实是它的直接子节点
- 确认标签名拼写，大小写敏感（
A和a在 XHTML 模式下不同） - 避免用空格分隔：写成
nav a:nth-last-child(2)是后代选择器，而nav > a:nth-last-child(2)才是子元素选择器，后者才符合预期 - 如果父元素里有注释节点（
<!-- ... -->），某些旧版 Safari 会把它计入计数，导致位置偏移——开发阶段尽量删掉无意义注释
真正难的不是写对公式，而是看清 DOM 树的真实结构。每次失效，优先打开 Elements 面板，数一数“从后往前第几个”到底是谁。
