css伪类:nth-of-type与:nth-child有何不同

:nth-child 以位置为核心，选择父元素下第n个子元素且必须匹配指定标签；:nth-of-type 以类型顺序为核心，选择同标签中第n个。例如在混合子元素中，p:nth-child(2) 要求第二个子元素是p，而 p:nth-of-type(2) 只需是第二个p标签，无论整体位置。

:nth-of-type 和 :nth-child 都是 CSS 中的结构伪类，用于选择父元素下的特定子元素，但它们的匹配逻辑有本质区别。理解它们的不同，关键在于“选择依据是什么”。

:nth-child 以位置为中心

这个伪类关注的是：目标元素是否位于父元素的第几个子元素位置上，而不关心它本身的标签类型。

也就是说，:nth-child(n) 会从父元素的第一个子元素开始数，只要位置符合 n（可以是数字、公式或关键字），就选中该位置的元素，前提是这个元素存在且满足前面的元素类型条件（如果有指定）。

• p:nth-child(2) 表示：父元素的第二个子元素，并且它必须是一个 <p> 标签，才会被选中。
• 如果第二个子元素是 <div>，即使后面有多个 <p>，这个选择器也不会命中任何元素。

:nth-of-type 以类型和顺序为中心

这个伪类关注的是：当前元素在其父元素中，是同类型标签中的第几个。它会忽略其他类型的兄弟元素，只统计相同标签的出现顺序。

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

64

查看详情

立即学习“前端免费学习笔记（深入）”；

换句话说，:nth-of-type(n) 会先筛选出所有同类型的兄弟元素（如所有 <p>），然后从中选出第 n 个。

• p:nth-of-type(2) 表示：在所有 <p> 标签中，选择第二个出现的，不管它在父元素中整体排第几位。
• 即使前面有几个 <div> 或 <span>，只要它是第二个 <p>，就会被选中。

实际对比示例

假设有如下 HTML 结构：

<div>
  <h1>标题</h1>
  <p>第一段</p>
  <span>辅助内容</span>
  <p>第二段</p>
</div>

• p:nth-child(2)：选中第一个 <p>，因为它是父元素的第二个子元素，位置匹配。
• p:nth-child(4)：不会选中第二个 <p>，虽然它是第四个子元素，但 :nth-child(4) 要求第四个子元素是 <p>，而这里第四个确实是 <p>，所以能匹配。
• p:nth-of-type(2)：选中第二个 <p>，因为它是所有 <p> 中的第二个，无论位置如何。
• p:nth-child(3)：无法匹配任何元素，因为第三个子元素是 <span>，不是 <p>。

核心区别总结

• :nth-child 看的是“位置” —— 第几个孩子，是不是我要的标签。
• :nth-of-type 看的是“同类中的顺序” —— 同类标签中排第几。
• 当子元素类型混杂时，两者结果可能完全不同。

以上就是css伪类:nth-of-type与:nth-child有何不同的详细内容，更多请关注php中文网其它相关文章！