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

苏承栈

2026-10-29 • 👁 0人浏览过

: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 以类型和顺序为中心这个伪类关注的是：当前元素在其父元素中，是同类型标签中的第几个。它会忽略其他类型的兄弟元素，只统计相同标签的出现顺序。使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载立即学习 “ 前端免费学习笔记（深入） ”；换句话说，:nth-of-type(n) 会先筛选出所有同类型的兄弟元素（如所有

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

p:nth-of-type(2)

表示：在所有

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

或，只要它是第二个

，就会被选中。实际对比示例假设有如下 HTML 结构：



  标题
  第一段
  辅助内容
  第二段

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 看的是“同类中的顺序” —— 同类标签中排第几。当子元素类型混杂时，两者结果可能完全不同。基本上就这些，关键在于理解“child”是按位置算，“of-type”是按标签类型分组后再算顺序。

标题

相关文章