:nth-of-type() 选不到目标元素的根本原因是它仅按同级同标签元素计数，完全忽略类名、属性等其他条件；例如div.item:nth-of-type(2)匹配的是第二个div元素而非第二个带item类的div。
为什么 :nth-of-type() 选不到你想要的元素
根本原因不是语法写错了，而是它只看「标签名 + 同级兄弟关系」，完全忽略类名、属性、内容甚至是否可见。比如 <div class="item"></div>
<p>text</p>
<div class="item"></div> 中，两个 <div> 是第 1 和第 3 个同类型（<code>div）元素，不是“第 1 个和第 2 个 .item”——:nth-of-type() 压根不认类名。
- 常见错误现象：
div.item:nth-of-type(2)试图选第二个带.item的div，但实际选中的是文档中第二个<div>（哪怕它没 class） <li>真正生效的只有标签类型：对 <code><section><p></p> <span></span><p></p></section>，p:nth-of-type(2)会命中第二个<p></p>，不是第二个子元素 - 如果中间插了
<h2></h2>或注释节点，不影响计数——:nth-of-type()只筛同标签，其他兄弟全当透明 -
:nth-child(n)看的是父容器下所有子元素的顺序位置，再判断是否匹配前面的选择器部分，所以div.item:nth-child(3)表示：“第 3 个子元素，且是<div class="item">” <li>性能上两者无差别，都是 CSS 引擎一次性遍历计算，但语义误用会导致样式失效，比性能问题更致命</li> <li>兼容性一致：IE9+ 支持 <code>:nth-of-type()，IE8 及以下都不行；别指望用它做降级方案 - 错误尝试：
div:nth-of-type(2).item—— 这表示“第 2 个<div>，且带 <code>.item”，但如果第 2 个<div> 恰好没 class，就啥也不中 <li>可行替代： <ul><li>用 <code>:nth-child()加精确结构假设（例如确定前两个子元素必为<div>） <li>给目标元素加唯一 <code>data-属性，如data-index="2"，再写div[data-index="2"] - JS 动态加 class：
document.querySelectorAll('div.item')[1].classList.add('target')，再写div.item.target - 注意：CSS 伪类无法基于属性值做算术运算，
[data-index="2"]只能硬编码，不能写成[data-index="n"] - 服务端渲染或 JS 插入的注释节点、空文本节点（比如换行缩进产生的
"\n "），会被:nth-child()计入，但:nth-of-type()完全无视——这反而让它在某些脏 DOM 下更稳定 -
<tr> <td></td> <th></th> </tr>中，td:nth-of-type(1)和th:nth-of-type(1)各自独立计数，因为<td> 和 <code><th> 类型不同 <li>Flex/Grid 容器中，DOM 顺序和视觉顺序可能不一致，但 <code>:nth-of-type()始终按 HTML 源码顺序，不是渲染后顺序
:nth-of-type() 和 :nth-child() 到底该用谁
选 :nth-of-type() 当且仅当你明确要按「标签种类」分组计数；其余情况，尤其是混排结构里找“第 N 个某类元素”，基本都该换 :nth-child() 配合类选择器，或者直接用 JS。
立即学习“前端免费学习笔记（深入）”；
怎么精准定位“第 N 个带某 class 的同标签元素”
纯 CSS 没有原生方案。浏览器不提供 :nth-of-class() 这种东西，硬凑选择器只会掉坑里。
那些年被 :nth-of-type() 坑过的边界情况
最常翻车的不是语法，是 DOM 结构本身在“悄悄变化”。
真正难的从来不是记住公式 an+b，而是每次写之前，先用浏览器开发者工具的“Elements”面板手动数一遍同级同标签元素的真实位置——别信直觉，数清楚再说。
