:nth-of-type(2)“跳号”是因为它只对同级同标签名元素计数，忽略非目标标签及嵌套结构；如ul中li被div包裹，则该li不参与计数，导致实际匹配的不是视觉上第2项。
为什么
因为 :nth-of-type() 只对**同级、同标签名**的兄弟元素计数，一旦 li 被 div、section 或其他容器包裹，它就不再是 ul 的直接子元素，自然不参与 ul li:nth-of-type() 的计数。
常见失效结构：<ul><li>1</li><div><li>2</li></div><li>3</li></ul> —— 此时 ul li:nth-of-type(2) 实际匹配的是第 3 项（它是 ul 下第二个直接子 li），而中间那个被 div 包着的 li 根本不计入。
- 检查 Elements 面板中目标
li的父节点是否真为ul（而非div或section） - 用
ul > li先确认是否所有目标都是直系子元素 - 若存在嵌套，必须改写为对应父容器的作用域，例如
div li:nth-of-type(1)
怎样让不同父容器下的同类元素统一编号
浏览器不支持跨父容器的全局类型序号。div.card:nth-of-type(2) 在每个独立父元素内都算 “第 2 个 div”，不是整页第 2 个 .card。
比如两个 section 各有 2 个 div.card，那么 div.card:nth-of-type(odd) 会命中每个 section 下的第一个 div（即共 2 个），而不是整页的第 1、3 个。
立即学习“前端免费学习笔记（深入）”；
- 想实现“全页面第 N 个 .card”，必须用 JS 动态加序号 class（如
data-index="2"） - 服务端渲染可提前注入序号，避免客户端计算
- 纯 CSS 方案：强制结构扁平化，例如统一用
main > div.card，再配main div.card:nth-of-type(2)
混用 class 和 :nth-of-type() 的典型误用
.item:nth-of-type(2) 是合法语法，但逻辑错误——:nth-of-type() 完全忽略 class，它只按 HTML 标签名分组。所以该选择器实际是 “第 2 个 div（假设 .item 是 div）且恰好有 class='item'”，不是 “第 2 个带 .item 的元素”。
示例结构：<div><p class="item">A</p><span>B</span><div class="item">C</div><p class="item">D</p></div>
-
p:nth-of-type(2)→ 匹配 D（第 2 个p） -
div:nth-of-type(2)→ 匹配 C（第 2 个div） -
.item:nth-of-type(2)→ 无效匹配（没有第 2 个.item类型，因类型不存在）
真正想选“第 2 个 .item”，只能靠 JS 或重构为语义化层级（如 .items > .item:nth-of-type(2)，前提是所有 .item 都是同一父级的直系子元素）。
调试时如何快速验证到底哪个元素被命中
别靠脑补 DOM 结构，打开 DevTools 的 Elements 面板，右键父元素 → “Edit as HTML”，看真实子节点顺序（包括注释、文本节点、嵌套层级）。
- 临时加
li:nth-of-type(2) { outline: 2px solid red; }，观察红框位置 - 再换成
li:nth-child(2)对比，若结果不同，说明中间夹了非li节点 - 用
getComputedStyle(el)检查 computed styles，确认规则是否被更高优先级样式覆盖
最常被忽略的是：你写的 ul li:nth-of-type(2) 看似合理，但实际 HTML 里 ul 开头是 <!-- header --> 或 CMS 插入的 <div class="ad"> —— 这些都不影响 :nth-of-type，但会让 :nth-child 失效；反过来，若你依赖 :nth-child 的绝对位置，却没意识到第一个子节点是注释，那整个序号就全偏了。
