CSS nth-of-type 与 nth-child 区别详解

CSS 中 `:nth-of-type()` 和 `:nth-child()` 表面相似，实则逻辑迥异：前者按**同类型标签（如所有 `

`）在兄弟元素中独立分组计数**，精准定位“第 N 个某类元素”；后者仅按**子元素在父容器中的物理位置顺序计数**，完全无视标签类型——在混排 DOM 结构中，这常导致 `p:nth-child(3)` 失效而 `p:nth-of-type(3)` 成功。文章直击高频误区：`:nth-of-type()` 忽略 class/id/属性，只认标签名；括号内禁用空格、`odd/even` 必须小写；配合后代选择器需用空格而非紧连；失效时需优先排查优先级覆盖、DOM 实际结构及伪元素干扰。真正关键，是写选择器前先在脑中为同类标签“分组编号”，而非数视觉位置。

直接说结论：要用 :nth-of-type() 精准选「第 N 个某类标签」，就别用 :nth-child()；后者只看位置，前者才按标签类型分组计数——混排结构里，这是根本区别，不是风格偏好。

为什么 p:nth-of-type(3) 能命中，而 p:nth-child(3) 失效？

因为 DOM 结构里，第 3 个子元素不一定是 p。比如父容器是：

标题

第一段

第二段

第三段

• p:nth-child(3) 查的是「第 3 个子节点」，那是
  ，不是 p，所以不匹配
• p:nth-of-type(3) 只统计所有 p 兄弟：第一个 p 是第 1 个，第二个 p 是第 2 个，第三个 p（即「第三段」）就是第 3 个，✅ 匹配成功

:nth-of-type() 的参数怎么写才不踩坑？

公式 an + b 行为和 :nth-child() 一致，但计数对象不同——它只对同标签兄弟生效。常见误写：

• 写成 .item:nth-of-type(2) → ❌ class 不参与类型识别，:nth-of-type 完全无视 class、id、属性，只认 p、div 这种标签名
• 写成 p:nth-of-type( 2 )（带空格）→ ❌ CSS 解析器会报错，括号内不能有空格
• 用 odd/even 时写成 p:nth-of-type(ODD) → ❌ 必须小写，odd 和 even 是关键字，大小写敏感

混合标签下，:nth-of-type() 和后代选择器怎么配合？

想给「第 2 个 section 里的所有 .card」加样式，不能写 section:nth-of-type(2).card（这表示「第 2 个 section 且自身有 card 类」），而要加空格变成后代关系：

section:nth-of-type(2) .card { color: red; }

这样才表示「位于第 2 个 section 内部（任意嵌套层级）的 .card 元素」。注意：:nth-of-type() 只作用于直接兄弟，不穿透子树；要跨层，必须靠空格或 > 明确关系。

失效排查：为什么写了却没反应？

最常被忽略的三点：

• 打开开发者工具，看 computed styles 里这条规则是否被更高优先级的选择器覆盖（比如带 !important 或更具体 class 的规则）
• 手动画 DOM 树，确认你数的「第 N 个」确实是该标签在同类型兄弟中的序号——div:nth-of-type(2) 前面哪怕有 10 个 h3、span，它们都不计入，但你得真找到第二个 div
• 检查伪元素干扰：HTML 注释 、