:nth-last-child() 从父元素最后一个子元素开始倒数匹配，仅对同级同标签名的兄弟元素生效，且要求目标元素在DOM中位置必须严格吻合倒数第n个子节点。
什么是 :nth-last-child() 的核心行为
:nth-last-child() 从父元素的最后一个子元素开始倒数匹配，只对**同级同类型（即同标签名）的兄弟元素有效**——这点和 :nth-child() 一样，但它计数方向相反。它不是“倒数第 n 个子元素”，而是“倒数第 n 个 是该标签的子元素”。比如 li:nth-last-child(2) 匹配的是：在所有 li 兄弟中，倒数排第 2 的那个 li，且它必须恰好是其父元素的倒数第 2 个子节点（位置需完全吻合）。
:nth-last-child(n) 常见写法与实际效果差异
写法看似简单，但位置约束常导致预期失效：
-
div:nth-last-child(1)→ 只匹配父元素中最后一个子节点 且 是div的那个元素；如果最后一个是p，这个div就不会被选中 -
span:nth-last-child(odd)→ 匹配倒数第 1、3、5… 个子节点位置上的span，但前提是那些位置上恰好是span -
a:nth-last-child(-n+3)→ 等价于“倒数前 3 个子节点中的a”，常用于菜单末尾加样式，但若倒数第 2 个是button，则跳过
为什么有时写对了却没生效？几个典型陷阱
真正卡住人的往往不是语法，而是 DOM 结构和选择器逻辑的错位：
- 父容器里混有文本节点、注释或不同标签（如
<div><p>A</p>Hello<p>B</p></div>），Hello是一个文本节点，会参与子节点计数，导致p:nth-last-child(1)失效 - 用了
display: flex或grid后误以为布局顺序 = DOM 顺序，但:nth-last-child()永远按原始 HTML 子节点顺序计算，不受 CSS 排序影响 - 想选“倒数第二个
td”，写了td:nth-last-child(2)，结果没命中——因为那列td实际在 DOM 中是倒数第 3 个子节点（前面还有th或空格文本）
替代方案：当 :nth-last-child() 不够用时
如果目标只是“倒数第 n 个某类元素”，而不强求它在 DOM 中的位置恰好是倒数第 n 个节点，更可靠的做法是结合其他选择器或 JS：
立即学习“前端免费学习笔记（深入）”；
- 用
:nth-last-of-type(n)—— 它只看同标签类型，忽略其他标签干扰，例如li:nth-last-of-type(2)会稳定选中倒数第二个li，不管中间有没有div或文本 - 给关键元素加 class（如
class="last-action"），比纯 CSS 位置选择更可控 - 复杂逻辑（如“倒数第 2 个带 data-role='item' 的元素”）建议用 JS 的
querySelectorAll()+.length计算索引，CSS 在这类场景下本就不是设计来兜底的
真正要注意的，是别把“视觉倒数”和“DOM 倒数”当成一回事——前者靠渲染，后者靠结构，而 :nth-last-child() 只认后者。
