CSS选择器中nth-child与nth-of-type的区别_nth选择器高阶用法

nth-child按所有子元素排序，nth-of-type按同类型标签排序；例如p:nth-child(2)选父元素第2个子元素且为p，而p:nth-of-type(2)选第2个p标签，忽略其他类型兄弟元素。

在CSS中，nth-child 和 nth-of-type 都用于选择特定位置的子元素，但它们的判断逻辑完全不同，容易混淆。理解它们的区别以及高阶用法，能让你更精准地控制样式。

nth-child：基于父元素的所有子元素排序

nth-child 会把父元素下的所有子元素统一计数，不管类型是否相同。只要目标元素在第n个位置上，就会被选中。

例如：

• p:nth-child(2) 表示：父元素的第二个子元素，且它必须是 <p> 标签才会匹配。
• 如果第二个子元素是 <div>，即使它是段落的“兄弟”，也不会被选中。

举个例子：

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

<div>
  <h2>标题</h2>
  <p>第一个段落</p>  <!-- 这是第2个子元素 -->
  <p>第二个段落</p>
</div>

使用 p:nth-child(2) 能选中“第一个段落”，因为它正好是父元素的第二个子元素。

nth-of-type：基于同类型标签的排序

nth-of-type 只对指定类型的标签单独计数。它会忽略其他类型的兄弟元素，只看当前标签类型的第几个。

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

35

查看详情

继续上面的例子：

• p:nth-of-type(1) 选中第一个 <p> 元素（即“第一个段落”）。
• p:nth-of-type(2) 选中第二个 <p> 元素（即“第二个段落”）。

哪怕前面有 <h2>，p 的类型计数是独立的。

常见误区对比

假设HTML结构如下：

<section>
  <p>段落1</p>
  <div>盒子1</div>
  <p>段落2</p>
  <p>段落3</p>
</section>

• p:nth-child(1)：匹配第一个 <p>，因为它是第一个子元素。
• p:nth-child(2)：不匹配任何元素，第二个子元素是 <div>，不是 p。
• p:nth-of-type(2)：匹配“段落2”，它是第2个 p 标签。
• p:nth-of-type(3)：匹配“段落3”。

nth选择器的高阶用法

CSS的 nth 系列支持数学表达式和关键词，非常灵活。

• :nth-child(2n)：选择偶数位元素（2, 4, 6...），常用于隔行变色。
• :nth-child(2n+1)：选择奇数位元素（1, 3, 5...）。
• :nth-child(n+4)：从第4个开始的所有子元素。
• :nth-child(-n+3)：只选前3个子元素。
• :nth-of-type(3n)：每3个同类型元素中的最后一个。

还可以结合关键词：

• :first-child 等价于 :nth-child(1)
• :last-child 等价于 :nth-last-child(1)
• :nth-of-type(even) 和 (odd) 支持直接写奇偶。

基本上就这些。关键在于搞清“按所有子元素排”还是“按同类标签排”。用错选择器可能导致样式不生效，调试时要特别注意DOM结构。

以上就是CSS选择器中nth-child与nth-of-type的区别_nth选择器高阶用法的详细内容，更多请关注php中文网其它相关文章！