CSS中的伪类（:nth-child、:nth-of-type等结构化伪类）详解

在CSS中，结构化伪类允许我们根据元素在文档树中的位置、与兄弟元素之间的关系来选择元素。它们是非常强大的工具，尤其适用于列表、表格等需要样式化的重复结构。其中最常用和重要的一组是子元素索引伪类，包括 :nth-child()、:nth-of-type()、:first-child、:last-child、:only-child 等。它们的核心思想是“按位置选择”。

知识描述

结构化伪类不是基于元素的状态（如 :hover 基于鼠标悬停），而是基于元素在其父元素所有子元素中的“索引位置”或“类型索引位置”。理解它们的关键在于搞清楚“父元素”、“子元素列表”和“索引计数”。

解题过程与详细讲解

我将通过一系列递进步骤，帮你建立清晰的理解模型。

第一步：理解基础概念——子元素列表

假设我们有如下HTML结构：

<ul class="list">
  <li>项目1</li>
  <li>项目2</li>
  <p>一个段落（注意，这不是li）</p>
  <li>项目3</li>
  <li>项目4</li>
</ul>

<ul class="list"> 是父容器。它的子元素列表按顺序是：第一个<li>、第二个<li>、<p>、第三个<li>、第四个<li>。索引从1开始计数。

第二步：:nth-child(n) —— 选择第n个子元素

:nth-child(n) 的匹配逻辑分为两步：

1. 找到目标元素的所有兄弟元素（即父元素的所有直接子元素，不论元素类型）。
2. 从这个兄弟元素列表中，从上到下、从1开始计数，选中位置序号为 n 的元素。

示例分析：用我们上面的HTML。

• .list :nth-child(2) 会选择谁？

  • 第一步：找出 .list 的所有子元素：[li, li, p, li, li]。
  • 第二步：计数，1->第一个li，2->第二个li。所以，第二个<li>（文字是“项目2”） 被选中。

• .list :nth-child(3) 会选择谁？

  • 计数到3：1->li，2->li，3->p。所以，那个<p>元素被选中。

关键点：:nth-child() 计数时，只看位置，不看元素类型。只有同时满足在位置n，且与选择器前缀（这里是 li 吗？不，我们用的是 .list :nth-child(3)，前缀是*即任意元素）匹配的元素才会被最终应用样式。

第三步：:nth-of-type(n) —— 选择第n个特定类型的子元素

:nth-of-type(n) 的匹配逻辑也分两步，但更精确：

1. 找到与目标元素类型相同的兄弟元素。
2. 在这个同类型兄弟元素列表中，从上到下、从1开始计数，选中位置序号为 n 的元素。

示例分析：同样用上面的HTML。

• .list li:nth-of-type(2) 会选择谁？

  • 第一步：在所有子元素中，只筛选出<li>类型的兄弟元素：[第一个li，第二个li，第三个li，第四个li]（<p>被排除在同类型列表外）。
  • 第二步：在同类型列表中计数，1->第一个li，2->第二个li。所以，第二个<li>（文字是“项目2”） 被选中。

• .list li:nth-of-type(3) 会选择谁？

  • 第一步：同类型<li>列表：[li, li, li, li]。
  • 第二步：计数，1->第一个li，2->第二个li，3->第三个li（在整个子元素列表中是第四个位置）。所以，第三个<li>（文字是“项目4”） 被选中。

关键点：:nth-of-type() 先按类型分组，再在各自的组内计数。它关心元素类型。

第四步：核心区别对比

让我们用一个更直接的对比来强化记忆。考虑这个结构：

<div>
  <p>第1个p</p>
  <span>第1个span</span>
  <p>第2个p</p>
  <span>第2个span</span>
  <p>第3个p</p>
</div>

• p:nth-child(2)：选择其父元素的第二个子元素，并且这个元素必须是<p>。父元素的第二个子元素是 <span>，它不是<p>，所以没有元素被选中。
• p:nth-of-type(2)：选择其父元素下，<p>类型中的第二个。父元素下所有<p>是 [第1个p， 第2个p， 第3个p]，其中第二个是“第2个p”。所以**“第2个p”被选中**。

第五步：公式与关键字

:nth-child() 和 :nth-of-type() 的参数 (n) 非常灵活。

• 关键词：
  • even：偶数位置 (2, 4, 6...)
  • odd：奇数位置 (1, 3, 5...)
• 功能公式 an+b：
  • n 是一个变量，代表从0开始的所有非负整数 (0, 1, 2, 3...)。
  • a 和 b 是你指定的整数，可以是正数、负数或零。
  • 浏览器会计算 an + b 的结果，结果为正整数时，就选中那个位置。

常用公式示例：

• :nth-child(3n)：选择第3、6、9...个元素 (31, 32, 3*3...)。
• :nth-child(3n+1)：选择第1、4、7、10...个元素 (30+1, 31+1, 3*2+1...)。
• :nth-child(2n+1) 或 :nth-child(odd)：奇数位。
• :nth-child(-n+3)：选择前3个元素。当n=0，结果是3；n=1，结果是2；n=2，结果是1；n=3，结果是0（不选）。所以是位置1,2,3。

第六步：相关变体伪类

理解核心后，其他相关伪类就很容易了：

• :first-child：等同于 :nth-child(1)。父元素的第一个子元素。
• :last-child：父元素的最后一个子元素。
• :only-child：父元素中有且仅有这一个子元素（它是唯一的孩子）。
• :first-of-type：等同于 :nth-of-type(1)。父元素下同类型兄弟元素中的第一个。
• :last-of-type：父元素下同类型兄弟元素中的最后一个。
• :only-of-type：父元素下该类型元素有且仅有一个（可能有其他类型的兄弟，但同类型的只有它自己）。
• :nth-last-child(n)：与 :nth-child() 逻辑一致，但从兄弟元素列表的末尾开始倒数。
• :nth-last-of-type(n)：与 :nth-of-type() 逻辑一致，但从同类型兄弟列表的末尾开始倒数。

总结与应用提示

1. 选择依据：始终问自己，选择是基于所有兄弟的全局位置（用-child系列），还是基于特定类型的局部位置（用-of-type系列）。
2. 组合使用：可以和其他选择器组合，如 .warning:nth-of-type(even)，选择类名为.warning的同类型偶数位元素。
3. 常见用途：
   • 斑马条纹表格行 (tr:nth-child(even))
   • 设置列表前几项或后几项的样式 (li:nth-child(-n+3), li:nth-last-child(1))
   • 在网格或卡片布局中，控制每行第一个或最后一个元素的边距。

通过以上分步拆解，你应该能清晰掌握这组伪类的核心机制和应用场景了。关键在于练习：在浏览器开发者工具中，对真实DOM结构使用这些选择器，观察哪些元素被高亮，是巩固理解的最佳方式。