:nth-last-child(2)常失效是因为它匹配父元素倒数第二个子元素且类型必须一致，而文本节点、注释或混排标签会干扰序号；应优先用:nth-last-of-type(2)按同类型倒序计数，或检查真实dom结构。
直接用 :nth-last-child(2) 就行，但得确认它真在“列表项”上生效
很多人写 :nth-last-child(2) 却没生效，不是语法错，而是选中逻辑被忽略了：:nth-last-child() 数的是**父元素下所有同级兄弟元素中倒数第 n 个**，且要求该元素**本身是目标类型**（比如 li），但不保证前面全是同类型。如果父容器里混着 div、span 或注释节点，li:nth-last-child(2) 可能根本匹配不到任何 li。
实操建议：
- 确保目标元素（如
li）是父元素的直接子元素，且你关心的是它在整个子元素序列中的倒数位置 - 如果父元素下只有
li（比如标准ul或ol），li:nth-last-child(2)安全可用 - 如果父元素混有其他标签（例如
li+div.separator），改用li:nth-of-type(2)更稳妥——但它按类型顺序数，不是倒序 - 想严格按“倒数第二个
li”选中？CSS 原生做不到，得靠 JS 或预处理器生成类名
:nth-last-child(2) 和 :nth-last-of-type(2) 的区别必须分清
这是最容易踩的坑：前者看“位置”，后者看“类型”。假设 HTML 是：
- 一
- 二
- 三
- 四
分隔
此时：
-
li:nth-last-child(2)匹配的是<div>分隔</div>—— 因为倒数第二个子元素是那个div，而它不是li，所以实际不匹配任何li -
li:nth-last-of-type(2)才真正匹配倒数第二个li（即“三”），因为它先筛选出所有li，再从这些li中倒数取第 2 个 - 浏览器兼容性上，
:nth-last-of-type()在 IE9+ 支持，和:nth-last-child()一致，无需额外顾虑
伪类生效的前提：元素必须真实存在且未被隐藏
:nth-last-child(2) 不会“预测”或“占位”。如果列表只有 1 个 li，那 li:nth-last-child(2) 永远不会触发样式；如果用了 display: none 或 visibility: hidden 隐藏了倒数第一个，只要 DOM 节点还在，计数仍包含它。
常见误判场景：
- 动态渲染列表（如 Vue/React），初始为空，后来才插入 2 个以上
li—— 样式规则已存在，但需确保插入后 DOM 结构满足条件 - 用
hidden属性隐藏某个li，它仍参与:nth-last-child()计数 - 用
display: none隐藏了倒数第一个li，剩下两个li时，原来的倒数第二个变成倒数第一个，:nth-last-child(2)就失效了
当 CSS 不够用时，别硬扛——该 JS 就 JS
如果业务逻辑明确要求“总是选中倒数第二个可见的 li”，而 DOM 中又夹杂不可控的非 li 元素或动态显隐，纯 CSS 无法可靠实现。这时候直接用 JS 更清晰：
const lis = Array.from(document.querySelectorAll('ul li'))
.filter(el => getComputedStyle(el).display !== 'none');
if (lis.length >= 2) {
lis[lis.length - 2].classList.add('target');
}
注意点：
- 别用
querySelectorAll('li:is(:not([style*="display: none"]))')这种组合——伪类不能嵌套，且内联样式检测不可靠 - 如果列表频繁更新，考虑用
MutationObserver监听变化，而不是反复轮询 - CSS 伪类是声明式的，JS 是命令式的；该交由 CSS 处理的（静态结构）就交给它，该由逻辑判断的（动态、可见性、类型混合）别强求 CSS
倒数第二个听起来简单，但一旦涉及 DOM 实际结构、可见性、混合类型，就很容易掉进“我以为它该匹配”的陷阱。动手前先 inspect 元素层级，确认你数的到底是“第几个子节点”，还是“第几个同类节点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
