`:nth-child` 选择器

CSS 中的 :nth-child 选择器允许我们根据元素在父容器中的位置来选择和设置特定元素的样式。

假设您有一个 HTML ，其中包含 ul 容器内的 li 元素列表。假设您想要设置列表项的样式，使所有奇数元素的背景颜色与偶数元素不同。您可以使用 :nth-child 选择器来实现此效果。

element:nth-child(n) {
  /* 样式内容 */
}

element 是您要选择和设置样式的 HTML 元素
```
`n` 是元素在子元素列表中的位置
```
- n 应该是正整数
- n 不匹配任何值为负或零的元素

例如， li:nth-child(1) 将选择第一个子元素， li:nth-child(2) 将选择第二个子元素，依此类推。

注意 :nth-child 选择器将选择容器内指定元素类型的所有子元素——包括内部子元素。

除了整数，我们还可以使用公式来选择特定间隔的元素。最常见的公式是 an+b ，其中 a 和 b 是整数：

a 代表元素被选中的间隔
b 表示开始的元素
n 可以是任何非负数或零；从零开始

举个例子：

li:nth-child(2n+1)

我们将公式中的 a 值设置为 2 ，这意味着 :nth-child 选择器将选择子元素列表中的每隔一个元素。公式中的 b 值为 1 ，这意味着选择器将从列表中的第一个元素开始。

例如，以下 HTML 代码：

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
  <li>List 6</li>
</ul>

由于 n 的值从 0 开始，将 li:nth-child(2n+1) 应用于上面的 HTML 代码将选择以下子元素：

如果 n = 0 ，则 2 x 0 + 1 = 1 ，它选择列表中的第一个元素
如果 n = 1 , 则 2 x 1 + 1 = 3 ，选择列表中的第三个元素
如果 n = 2 ，则 2 x 2 + 1 = 5 ，它选择列表中的第五个元素

因此， li:nth-child(2n+1) 选择器将选择列表中的第一个、第三个和第五个 li 元素。

您可以使用此 an+b 公式通过更改 a 和 b 的值来选择不同间隔和起点的元素。例如：

li:nth-child(3n+2) 将选择从第二个元素开始的每三个元素
li:nth-child(4n+3) 将选择从第三个元素开始的每四个元素

除了使用公式之外，还可以将 odd 和 even 等关键字与 :nth-child 选择器结合使用。例如， :nth-child(odd) 将选择所有奇数子元素，而 :nth-child(even) 将选择所有偶数子元素。

`:nth-child` 选择器备忘单

:nth-child 选择器的各种语法和示例。请参阅下表了解更多信息：

语法	定义	例子
`:nth-child(n)`	选择其父元素的第 n 个子元素	`li:nth-child(3)` – 选择 `<ul>` 中的第三个 `<li>` 元素
`:nth-child(even)`	选择其父元素的所有偶数子元素	`li:nth-child(even)` – 选择 `<ul>` 中的所有偶数 `<li>` 元素
`:nth-child(odd)`	选择其父元素的所有奇数子元素	`li:nth-child(odd)` – 选择 `<ul>` 中的所有奇数 `<li>` 元素
`:nth-child(-n+X)`	选择直到第 X 个元素的所有子元素	`li:nth-child(-n+3)` – 选择 `<ul>` 中的前三个 `<li>` 元素
`:nth-child(n+X)`	选择从第 X 个元素开始的所有子元素	`li:nth-child(n+2)` – 选择从 `<ul>` 中的第二个元素开始的所有 `<li>` 元素
`:nth-child(an+b)`	从第“b”个元素开始选择每个第“a”个元素	`li:nth-child(4n+2)` – 从 `<ul>` 中的第二个元素开始选择每四个 `<li>` 元素

`:nth-of-type` 选择器

CSS 中的 :nth-of-type 选择器用于选择给定类型的元素，这些元素是其父元素的 nth 子元素。该选择器类似于 :nth-child 选择器，但它只选择特定类型的元素，而不是所有元素。

:nth-of-type(n) {
  /* 样式... */
}

:nth-of-type 选择器的示例：

在上面的示例中， h2:nth-child(2) 选择器不会选择“标题 3”，因为它不是其父项的第二个子项。由于 :nth-child 规则考虑所有元素而不考虑指定类型，因此第一个 h1 标记在这种情况下将是第一个子元素，因此选择“标题 2”作为第二个子元素：

Demo Of Nth Child Selector Being Used To Select Second Child Element And First H2 Element In A List

假设您想使用 :nth-child 选择器来选择第二个 h2 标签。由于此示例中的第二个 h2 标记实际上是父容器中从头开始的第三个元素，因此应使用以下代码：

h2:nth-child(3) {
  color: red;
}

另一方面， h2:nth-of-type(2) 选择器将选择第二个 h2 标记，因为它在父容器中查找第二个 h2 标记时只考虑指定类型的元素。因此，此选择器不会将 h1 标记视为第一个子标记，也不会将 p 标记视为最后一个子标记。

换句话说， h2:nth-of-type(2) 选择器将选择第二个 h2 标记，只要它是父容器中指定类型的第二个元素，而不考虑其位置：

Demo Showing How Nth Of Type Selector Excludes Child Elements That Are Not Of A Specified Type And Is Being Used To Select The Second Element Of A Specified Type

未完待续

谢谢！

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 28 天

点击查看活动详情

使用 :nth-child 和其他选择器匹配 CSS 中的元素（一）

:nth-child 选择器

:nth-child 选择器备忘单

:nth-of-type 选择器

未完待续

谢谢！

`:nth-child` 选择器

`:nth-child` 选择器备忘单

`:nth-of-type` 选择器