:nth-last-child(1) 与 :last-child 在纯同类型子元素时等价，但前者在动态插入内容时更稳定；其失效主因是父容器存在空白节点或混排标签，需区分 :nth-last-child() 和 :nth-last-of-type() 的语义差异。
:nth-last-child(1) 和 :last-child 在 DOM 结构一致时完全等价
它们选中的元素一模一样，浏览器内部实现也基本相同——:last-child 就是 :nth-last-child(1) 的语法糖。所谓“更可靠”，只在一种前提下成立：你写的是 li:last-child，但父容器里混入了非 li 节点（比如 <p></p>、<div>、注释、换行文本节点），这时 <code>li:last-child 会失效，而 li:nth-last-child(1) 同样失效——它俩都卡在同一关。
真正让 :nth-last-child() “显得更稳”的场景，是你要匹配的不是“最后一个 li”，而是“倒数第 n 个子元素，且它恰好是 li”。例如：li:nth-last-child(2) 表示「父元素所有子节点中，从末尾数第 2 个，且该节点是 li」；而 li:last-of-type 才表示「所有 li 中最后一个」——这两者语义不同，不能互换。
真正提升稳定性的用法是 :nth-last-child() 配合公式
当列表前端可能动态插入内容（如广告位、推荐卡片），序号会整体后移，此时硬写 li:nth-child(3) 很容易错位；但 li:nth-last-child(1) 始终锚定 DOM 最末端，不受前面增删影响。
-
li:nth-last-child(1)→ 永远选中 DOM 末尾那个li（前提是它是最后一个子元素） -
li:nth-last-child(2)→ 永远选中倒数第二个子元素，且必须是li -
li:nth-last-child(n+2)→ 排除最后一个，选中其余所有li（只要它们位置满足条件）
这种“反向固定偏移”的写法，在 CMS 或用户生成内容场景下比正向计数更抗干扰。
为什么你常觉得 :nth-last-child(1) “没生效”？
根本原因不是兼容性或语法错，而是它对 DOM 结构极其敏感：
- 父容器里有空格、换行、注释节点 → 它们算作子节点，
:nth-last-child(1)就可能命中一个textNode而不是你的div - 子元素类型不统一（比如
div.item和span.ad混排）→div:nth-last-child(1)只有在div恰好是最后一个子元素时才生效 - 用了
display: flex+flex-wrap→ 视觉上最后一行末尾 ≠ DOM 顺序末尾，:nth-last-child(1)完全不解决“最后一行”问题
遇到失效，先打开开发者工具 Elements 面板，右键父元素 →「Edit as HTML」，删掉所有空白和注释再试一次——多数时候立刻就好。
别混淆 :nth-last-child() 和 :nth-last-of-type()
这是最常被忽略的差异点：
-
li:nth-last-child(1)：要求这个li是父元素**所有子节点中最后一个** -
li:nth-last-of-type(1)：只要求它是父元素中**所有li里的最后一个**，不管中间夹了多少其他标签
如果你的 HTML 是 <ul>
<li>A</li>
<p>广告</p>
<li>B</li>
</ul>，那么：
-
li:last-child→ 不匹配（
<li>B</li>？不，是 <li>B</li>，但中间有 <p></p>，所以 li:last-child 不成立）
li:nth-last-child(2) → 匹配 <li>B</li>（因为 <p></p> 是倒数第 1 个子，<li>B</li> 是倒数第 2 个）li:last-of-type → 匹配 <li>B</li>（它确实是所有 li 中最后一个）视觉布局越复杂，越要分清「子元素位置」和「同类元素位置」——这两个概念差之毫厘，样式就失之千里。
