:nth-of-type只按同标签兄弟计数，无视类名和嵌套；:nth-child则按所有兄弟位置计数后再判断标签。选特定class的第N个元素应写为div.card:nth-of-type(2)，而非div:nth-of-type(2).card。
为什么 :nth-of-type 看似匹配却没生效
根本原因不是写法错，而是它只看「兄弟节点中的同类型标签」，完全忽略类名、属性、嵌套结构。比如
text
中，两个
是第 1 和第 3 个
兄弟，所以 div:nth-of-type(2) 永远选不到——因为中间夹了个
，第二个
实际是 :nth-of-type(3)。
:nth-of-type 和 :nth-child 的关键区别在哪
二者计数逻辑完全不同：
-
:nth-of-type(n)：只统计同标签名的兄弟元素（
只和
比，-
:nth-child(n)：统计所有兄弟元素位置，再判断该位置上是否为指定标签
示例 html：
立即学习“前端免费学习笔记（深入）”；
标题
段落1
卡片1 段落2
卡片2
此时：
-
div:nth-of-type(1) → 匹配第一个
（即“卡片1”）
-
div:nth-of-type(2) → 匹配第二个
（即“卡片2”）
-
div:nth-child(3) → 匹配第 3 个子元素，恰好是第一个
，生效
-
div:nth-child(4) → 第 4 个子元素是
，不匹配
，无效
想选「带特定 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 变动失效
- ⚠️ 注意：如果中间混入其他
（哪怕没 class），计数仍会跳变。例如插入
，原第二个 .card 就变成 :nth-of-type(3)
更可靠的选择策略：用 :nth-child 配合结构判断
当 DOM 结构相对稳定（比如列表项都是同级
- 或统一容器下的
:nth-child 更可控：
- 若所有目标元素都是
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 不影响计数，这点常被误解）。