:nth-last-of-type(2)选不到倒数第二个目标元素，是因为它只对同标签名且为父元素直接子元素的节点倒序计数，若中间夹杂其他标签、包装容器或类型不一致节点，这些干扰项虽被跳过，但会改变目标元素在同类型序列中的倒序位置。
为什么 :nth-last-of-type(2) 有时选不到倒数第二个目标元素
它只对「同标签名 + 同父级直接子元素」生效，中间夹了其他标签、包装容器或类型不一致的节点，就会跳过计数。比如写 li:nth-last-of-type(2)，但实际 DOM 是 <ul><li></li><div class="ad"></div><li></li><li></li></ul>，那倒数第二个 li 就是第 2 个（从后往前数：第 1 个是末尾 li，第 2 个是中间那个），不是你肉眼以为的“列表里排第二的那个”。
:nth-last-of-type(2) 的真实计数逻辑
它不看 DOM 总序号，只提取所有同类型兄弟节点，再倒序编号：
-
li:nth-last-of-type(2)→ 找出父元素下所有li，按它们在 DOM 中出现顺序排成一列，再从最后一个开始倒数，取第 2 个 - 忽略
div、span、文本节点、注释节点 —— 它们完全不参与计数 - 不认
class或data-属性，只认 HTML 标签名（li≠article，哪怕 class 都叫item） - 必须是**直接子元素**；如果
li被套在<div><li></li></div>里，那它就不是父ul的同类型兄弟，nth-last-of-type失效
常见失效场景和应对方式
动态渲染（React/Vue/SSR）最容易翻车：
- Vue 的
<template>或 React 的Fragment不产生 DOM，但手动加的<div>包裹会 —— 检查浏览器开发者工具里父元素展开后的直接子节点，确认全是li - 服务端渲染注入空格或换行，生成文本节点？没关系，
nth-last-of-type自动跳过，比nth-last-child更抗干扰 - 条件渲染导致某次只渲染出 1 个
li？那nth-last-of-type(2)就无匹配项 —— 可加兜底：li:last-of-type单独设样式 - 想控制“倒数第二项之后的所有项”？用
li:nth-last-of-type(-n+2)，不是-n+1或n+2
调试时最该盯住的三个地方
别靠猜，打开开发者工具逐项核对：
立即学习“前端免费学习笔记（深入）”；
- 右键父元素 → “检查”，展开后数一数直接子节点，过滤掉灰色
#text和<!-- -->—— 看剩下几个目标标签（如li） - 临时加一条测试规则：
*:nth-last-of-type(2) { outline: 2px solid red !important; }，看红框套在谁身上 - 如果目标元素有
display: none，它仍参与计数；但若用visibility: hidden或opacity: 0，不影响位置计算
真正难的不是写对选择器，而是看清框架或模板到底往父容器里塞了什么节点 —— 那些看不见的包裹层和条件分支，才是让倒数第二“消失”的真正原因。
