:nth-last-child(2) 选中倒数第二个子元素，但因文本、注释等节点也被计数，常导致误判；需用开发者工具逐个核对子节点，或改用更稳定的 :nth-last-of-type(2)。

:nth-last-child(2) 能选中倒数第二个子元素，但**它经常不生效——不是语法错，而是你数错了 DOM 子节点**。

为什么 :nth-last-child(2) 经常没反应

它从父元素最后一个子节点开始倒数，**把所有子节点都算进去**：<li>、<div>、文本节点（换行/空格）、注释节点（Vue/React/SSR 常见）——全算。<ul> <li>写 <code>li:nth-last-child(2) 想选倒数第二个 <li>，结果父容器末尾有个 <footer></footer>，那倒数第 2 个就变成 <footer></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) 怎么选

关键看你要的是「位置」还是「类型」：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 要确保目标是「整个父容器中倒数第二个子元素，且它必须是 <li>」→ 用 li:nth-last-child(2)
• 要确保目标是「所有 <li> 中倒数第二个，不管中间夹了啥」→ 用 li:nth-last-of-type(2)
• 纯 <li> 列表（无干扰节点）下两者等价；一旦有 <div>、文本或注释，<code>:nth-last-of-type(2) 更稳定
• children API（如 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 树里那些看不见的节点怎么悄悄改写了你的“倒数第二”。