nth-of-type与nth-child区别全解析

哈喽！今天心血来潮给大家带来了《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) 表示：父元素的第二个子元素，并且它必须是一个

  标签，才会被选中。

• 如果第二个子元素是
  ，即使后面有多个

  ，这个选择器也不会命中任何元素。

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

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

换句话说，:nth-of-type(n) 会先筛选出所有同类型的兄弟元素（如所有

），然后从中选出第 n 个。

• p:nth-of-type(2) 表示：在所有

  标签中，选择第二个出现的，不管它在父元素中整体排第几位。

• 即使前面有几个
  或 ，只要它是第二个

  ，就会被选中。

实际对比示例

假设有如下 HTML 结构：

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

• p:nth-child(2)：选中第一个

  ，因为它是父元素的第二个子元素，位置匹配。

• p:nth-child(4)：不会选中第二个

  ，虽然它是第四个子元素，但 :nth-child(4) 要求第四个子元素是

  ，而这里第四个确实是

  ，所以能匹配。

• p:nth-of-type(2)：选中第二个

  ，因为它是所有

  中的第二个，无论位置如何。

• p:nth-child(3)：无法匹配任何元素，因为第三个子元素是 ，不是

  。

核心区别总结

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

本篇关于《nth-of-type与nth-child区别全解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！