css:nth-of-type选择器和nth-child有什么不同

:nth-child(n)按所有子元素排序，要求第n个位置的元素是目标标签；:nth-of-type(n)按同类型元素排序，选择该类型中第n个。例如在span、p、span、p结构中，p:nth-child(2)选第一个p（整体第2个），p:nth-of-type(2)选第二个p（p类第2个）。两者计数范围不同：前者是全部子元素，后者仅同类标签。

:nth-of-type 和 :nth-child 都是 CSS 中用于选择特定位置子元素的伪类选择器，但它们的判断逻辑不同，容易混淆。核心区别在于：它们计算“第几个”的依据不一样。

Type Studio

一个视频编辑器，提供自动转录、自动生成字幕、视频翻译等功能

23

查看详情

:nth-child 按父元素下的所有子元素排序

• 例如：p:nth-child(2) 表示：父元素下的第二个子元素，且这个元素必须是 p 标签，才会被选中。
• 如果第二个子元素是 div，哪怕它是第二个 p 元素，也不会被选中。

:nth-of-type 按同类型元素排序

• 例如：p:nth-of-type(2) 表示：所有 p 类型的子元素中，排在第二位的那个。
• 即使前面有其他标签（如 div、span），只要它是第二个 p，就能被选中。

举个例子说明区别

<div>
  <span>Span 1</span>
  <p>Paragraph 1</p>
  <span>Span 2</span>
  <p>Paragraph 2</p>
</div>

• p:nth-child(2)：能选中第一个 p，因为它是父元素的第二个子元素。
• p:nth-child(4)：能选中第二个 p，因为它是第四个子元素。
• p:nth-of-type(2)：也能选中第二个 p，因为它是第二个 p 类型元素，不管位置是不是第二。
• p:nth-child(2) 不会选中第二个 p，因为它不是第二个子元素。

总结关键点

• :nth-child(n)：看整体位置。第 n 个子元素必须是你指定的标签。
• :nth-of-type(n)：看同类元素中的顺序。是第 n 个该类型元素即可，不管中间穿插了什么。
• 当元素类型一致且顺序连续时，两者行为可能相同；一旦混用标签，结果就可能不同。

以上就是css:nth-of-type选择器和nth-child有什么不同的详细内容，更多请关注php中文网其它相关文章！