:nth-of-type只按同标签兄弟计数，无视类名和嵌套；:nth-child则按所有兄弟位置计数后再判断标签。选特定class的第N个元素应写为div.card:nth-of-type(2)，而非div:nth-of-type(2).card。
为什么 :nth-of-type 看似匹配却没生效
根本原因不是写法错，而是它只看「兄弟节点中的同类型标签」，完全忽略类名、属性、嵌套结构。比如 <div class="item"></div><p>text</p><div class="item"></div> 中，两个 <div> 是第 1 和第 3 个 <div> 兄弟，所以 div:nth-of-type(2) 永远选不到——因为中间夹了个 <p>，第二个 <div> 实际是 :nth-of-type(3)。
:nth-of-type 和 :nth-child 的关键区别在哪
二者计数逻辑完全不同：
-
:nth-of-type(n)：只统计同标签名的兄弟元素（<div>只和<div>比，<span>只和<span>比） -
:nth-child(n)：统计所有兄弟元素位置，再判断该位置上是否为指定标签
示例 HTML：
<section> <h2>标题</h2> <p>段落1</p> <div class="card">卡片1</div> <p>段落2</p> <div class="card">卡片2</div> </section>
此时：
立即学习“前端免费学习笔记（深入）”；
-
div:nth-of-type(1)→ 匹配第一个<div>（即“卡片1”） -
div:nth-of-type(2)→ 匹配第二个<div>（即“卡片2”） -
div:nth-child(3)→ 匹配第 3 个子元素，恰好是第一个<div>，生效 -
div:nth-child(4)→ 第 4 个子元素是<p>，不匹配<div>，无效
想选「带特定 class 的第 N 个同类元素」怎么办
纯 :nth-of-type 不支持 class 过滤。必须组合使用，但要注意顺序和优先级：
- ✅ 正确写法：
div.card:nth-of-type(2)—— 先限定标签和 class，再按类型计数 - ❌ 错误写法：
div:nth-of-type(2).card—— 浏览器解析为「第 2 个 div 且带 card 类」，但:nth-of-type已完成计数，class 成为额外条件，易因 DOM 变动失效 - ⚠️ 注意：如果中间混入其他
<div>（哪怕没 class），计数仍会跳变。例如插入<div></div>，原第二个.card就变成:nth-of-type(3)
更可靠的选择策略：用 :nth-child 配合结构判断
当 DOM 结构相对稳定（比如列表项都是同级 <li> 或统一容器下的 <article>），:nth-child 更可控：
- 若所有目标元素都是
<article>且连续排列：article:nth-child(2n)稳定选偶数位 - 若目标元素混在其他标签中，但 class 唯一可识别：
.card:nth-child(2n)—— 此时它选的是「位置为偶数、且该位置元素有 .card 类」的节点 - 性能提示：现代浏览器对两者优化差异极小，不必为性能刻意回避
:nth-child；真正影响性能的是过于宽泛的祖先选择器（如body div ul li:nth-of-type(3)）
真正容易被忽略的是：伪类匹配发生在渲染前的样式计算阶段，它看不到 JavaScript 动态插入的节点，也不感知 display: none 元素是否参与计数（它们仍计入 :nth-child，但不计入 :nth-of-type 的「可见兄弟」逻辑——等等，其实都计入，只是 display: none 不影响计数，这点常被误解）。
