:nth-last-child(2)不生效是因为它匹配父元素中倒数第二个子元素（含文本、注释等），而非同类型元素；若需选倒数第二个同标签元素，应使用:nth-last-of-type(2)。
为什么 :nth-last-child(2) 有时不生效
它确实能选中倒数第二个子元素，但前提是目标元素必须是其父容器的**第 n 个子元素（从后往前数）**，且类型无关。常见失效场景：父元素里混有其他标签（比如 <div> 包着 <p>、<span>、注释或文本节点），而你只想选最后一个 <p> 的倒数第二个——这时 :nth-last-child(2) 会去找整个子元素序列里的倒数第二个，不一定是 <p>。
:nth-last-of-type(2) 才是按标签类型倒数匹配
如果你的目标是「倒数第二个 <p>」或「倒数第二个 <li>」，必须换用 :nth-last-of-type(2)。它只计算同类型兄弟元素，忽略其他标签和文本节点。
例如：
ul > li:nth-last-of-type(2) { color: red; }这段代码会稳定命中 <ul> 中倒数第二个 <li>，哪怕前面插了 <div> 或空格文本。
立即学习“前端免费学习笔记（深入）”；
-
:nth-last-child(2)：看位置（整个子元素列表的倒数第 2 个） -
:nth-last-of-type(2)：看类型（同标签名的倒数第 2 个） - 两者在纯同类型子元素下效果一致；一旦有干扰节点，结果立刻不同
动态内容下要注意 DOM 实际结构
JS 插入元素、Vue/React 渲染时带的注释节点、SSR 生成的空白文本，都会影响 :nth-last-child 的计数。调试时右键「检查元素」，展开父节点，数一数子节点（包括 #text 和 <!-- --> ）才能确认真实序号。
- 浏览器开发者工具里，灰色文字节点也是子元素
- 服务端渲染（如 Next.js）常在组件间注入空格或换行，产生文本节点
- 用
display: none隐藏的元素仍参与:nth-last-child计算
兼容性与替代方案
:nth-last-child 和 :nth-last-of-type 在 IE9+ 均支持，移动端无压力。真要兼容 IE8？只能 JS 操作：parentNode.children 取数组后取 [children.length - 2]，再加 class 控制样式。
注意：children 返回的是 HTMLCollection（只含元素节点），比 childNodes 更接近 :nth-last-of-type 的行为。
真正容易被忽略的，是「你以为的倒数第二，其实是 DOM 树里被注释或空格悄悄顶上去的那个」。
