:nth-of-type(n)选择父元素下第n个同标签名的兄弟元素，忽略非该标签的兄弟节点及class、id等属性；与:nth-child()区别在于按标签分组计数而非全局编号。
伪类 :nth-of-type() 的核心作用
:nth-of-type(n) 选择的是**父元素下第 n 个同类型（即相同 HTML 标签名）的兄弟元素**，不是第 n 个子元素，也不是按 CSS 类或属性筛选的元素。它只看标签名是否一致，比如所有 p、所有 div、所有 li，各自独立计数。
为什么 :nth-of-type(2) 常选不到你想要的第二个元素？
常见误解是把它当成“页面中第二个带某 class 的元素”，但实际它完全忽略 class、id、属性，只按标签归类计数。例如：
<div> <p class="intro">第一段</p> <h2>标题</h2> <p class="content">第二段</p> <span>一段文字</span> <p>第三段</p> </div>
此时 p:nth-of-type(2) 匹配的是第三个 p（即“第三段”），因为它是父容器中**第二个 p 标签**——等等，不对：上面只有三个 p，第一个是 intro，第二个是 content，第三个是无 class 的那个。所以 p:nth-of-type(2) 实际匹配的是 class="content" 那个 p。关键点在于：它跳过所有非 p 元素（h2、span）不参与计数。
立即学习“前端免费学习笔记（深入）”；
- 如果想选“带
class="content"的第二个元素”，:nth-of-type无能为力，得用 JS 或重构结构 -
:nth-of-type(odd)和:nth-of-type(2n+1)等价，但只对同标签生效；:nth-child(2n+1)则可能混入其他标签导致错位 - 浏览器兼容性没问题，IE9+ 全支持
:nth-of-type() 和 :nth-child() 的关键区别
两者参数写法一样（如 (3n+1)），但计数逻辑完全不同：
-
:nth-child(n)：在父元素所有子元素中，从左到右统一编号，再看第 n 个是否匹配该选择器的标签/条件 -
:nth-of-type(n)：先按标签名分组（如所有li一组、所有div一组），再在每组内单独编号 - 当父元素子节点类型混杂时，二者结果往往不同。例如一个
ul里有li、div、li，那么li:nth-of-type(2)能命中第二个li；而li:nth-child(2)会失败，因为第二个子节点是div
实用技巧与易错点
写 :nth-of-type() 时真正影响效果的是「父级结构」和「兄弟元素的标签分布」，不是样式本身：
- 不要在复杂嵌套中盲目套用，先用浏览器开发者工具的「Elements」面板手动数一遍目标标签的同类型序号
-
tr:nth-of-type(2)在表格中很安全，因为tr通常只出现在tbody下且类型单一；但td:nth-of-type(2)可能因th存在而偏移 - 无法组合伪类做“第 2 个且带 class”的筛选，
.my-class:nth-of-type(2)合法但语义仍是“第 2 个同类型元素，且恰好有 class”，不是“在所有 .my-class 中取第 2 个” - 如果需要后者，必须用 JS：
document.querySelectorAll('.my-class')[1]
最常被忽略的一点：它不感知 DOM 动态插入或 display: none 元素——隐藏的同类型元素仍参与计数。
