:nth-of-type选不到目标li是因为它按同类型元素在父容器中的位置计数，而非子元素序号；若li间混有div等其他标签，其序号会跳变，导致预期失效。
为什么 :nth-of-type 选不到你想要的 li
因为 :nth-of-type 数的是「同类型元素」在父容器中的位置，不是数第几个子元素。如果列表里混着 div、p 或注释节点，li 的序号会跳着算。
常见错误现象：ul li:nth-of-type(2) 没生效，或者高亮了第 3 个 li 而不是第 2 个。
- 检查父元素下是否只有
li—— 只要中间插了一个div，第二个li就可能变成:nth-of-type(3) - HTML 注释（
<!-- ... -->）不影响计数，但display: none的元素仍参与计数 -
:nth-of-type只认标签名，不认 class 或属性，li.active和li在它眼里是同一类型
:nth-of-type 和 :nth-child 到底该用谁
看你要锁定的是「结构顺序」还是「同类顺序」。
- 用
:nth-child(n)：你想选父元素下第 n 个子元素，且它恰好是li（比如“每行第一个li”） - 用
:nth-of-type(n)：你想选第 n 个li，不管前面穿插了多少其他标签（比如“列表中第三个可点击项”，而它固定是li） - 性能上没差别，但语义不同；浏览器解析时都走 CSS 选择器引擎，无明显渲染开销差异
示例对比：
<ul> <li>A</li> <div>skip</div> <li>B</li> <li>C</li> </ul>此时
li:nth-child(3) 不匹配（第 3 个子是 div），但 li:nth-of-type(2) 匹配 B。
写 :nth-of-type 表达式时最容易错的三件事
看似简单，但参数稍一变形就失效，尤其在动态内容或 SSR 场景下。
立即学习“前端免费学习笔记（深入）”；
- 忘记括号里不能写变量：CSS 里不支持
li:nth-of-type(var(--n))，得靠 JS 动态加 class 或内联 style -
an+b中的a是步长，b是起始偏移——:nth-of-type(2n+1)是奇数位，:nth-of-type(2n)是偶数位，但:nth-of-type(n+3)是从第 3 个开始往后全选，不是“每隔 3 个” - 负数索引无效：
:nth-of-type(-n+2)合法，能选前两个；但:nth-of-type(-1)不合法，也不报错，只是不匹配任何元素
在 React/Vue 项目里用 :nth-of-type 要当心什么
框架生成的 DOM 常含额外 wrapper 或注释节点，导致序号漂移。
- Vue 的
v-if/v-for会产生条件性节点，可能让li实际位置和预期不符 - React 的 Fragment（
<></>）不产生真实 DOM 节点，不影响计数；但React.StrictMode在开发模式下双渲染可能导致临时 DOM 变化，调试时看到序号异常 - 服务端渲染（SSR）后 JS 激活前，样式已按初始 HTML 计算；若 hydration 后 DOM 结构变化（如懒加载插入新
li），原:nth-of-type规则可能突然“失准”
稳妥做法：对关键样式（如高亮第一项、隔行变色）优先用 class 控制，:nth-of-type 仅用于辅助视觉节奏，不承担功能逻辑。
