:nth-last-child(2) 选中倒数第二个子元素，但因文本、注释等节点也被计数，常导致误判；需用开发者工具逐个核对子节点，或改用更稳定的 :nth-last-of-type(2)。
:nth-last-child(2) 能选中倒数第二个子元素，但**它经常不生效——不是语法错，而是你数错了 DOM 子节点**。
为什么 :nth-last-child(2) 经常没反应
它从父元素最后一个子节点开始倒数，**把所有子节点都算进去**：<li>、<div>、文本节点（换行/空格）、注释节点（Vue/React/SSR 常见）——全算。
- 写
li:nth-last-child(2)想选倒数第二个<li>，结果父容器末尾有个<footer>，那倒数第 2 个就变成<footer>，样式自然不应用 - HTML 里写成
<ul>\n <li>A</li>\n <li>B</li>\n</ul>，换行符会被解析为#text节点，li:nth-last-child(2)可能匹配到 A 而不是 B - 用开发者工具检查时，灰色文字节点（
#text）和注释（<!-- -->）都是真实子元素，必须手动数一遍才能确认目标元素的真实倒数位置
:nth-last-child(2) 和 :nth-last-of-type(2) 怎么选
关键看你要的是「位置」还是「类型」：
- 要确保目标是「整个父容器中倒数第二个子元素，且它必须是
<li>」→ 用li:nth-last-child(2) - 要确保目标是「所有
<li>中倒数第二个，不管中间夹了啥」→ 用li:nth-last-of-type(2) - 纯
<li>列表（无干扰节点）下两者等价；一旦有<div>、文本或注释，:nth-last-of-type(2)更稳定 -
childrenAPI（如el.children[el.children.length - 2]）行为更接近:nth-last-of-type，因为children只含元素节点，忽略文本和注释
怎么验证和调试 :nth-last-child(2) 是否命中
别猜，直接看 DOM 结构：
立即学习“前端免费学习笔记（深入）”；
- 在浏览器开发者工具中展开父元素，**逐个数子节点**（包括灰色的
#text和<!-- -->），确认目标<li>真实的倒数序号 - 临时加一条通用规则：
*:nth-last-child(2) { outline: 2px solid red; }，看红框套在谁身上 - 如果目标元素被
display: none隐藏，它仍参与计数——这点容易误判 - 服务端渲染（Next.js/Nuxt）或模板引擎（Jinja/Twig）常注入空白文本节点，动态插入内容前先
el.innerHTML = el.innerHTML.trim()可减少干扰（慎用，会丢事件绑定）
真正难的不是写对选择器，而是看清 DOM 树里那些看不见的节点怎么悄悄改写了你的“倒数第二”。
