CSS 第 n 个元素

在 CSS 中，我们可以通过 :nth-child() 选择器或者 :nth-of-type() 选择器来选取某个元素的第 n 个兄弟元素或者第 n 个相同类型的兄弟元素。这两种选择器的使用场景略有不同：

• :nth-child() 选择器选取的是某个元素的第 n 个子元素，而这个子元素可以是任何类型；
• :nth-of-type() 选择器选取的是某个元素的第 n 个相同类型的兄弟元素。

:nth-child() 选择器

nth-child() 选择器的语法如下：

selector:nth-child(n)

其中，

• selector：要选择的元素。
• n：表示第 n 个子元素，可以是一个正整数，一个表达式（例如 2n+1）或者关键字 odd 或 even。

举个例子，我们想选取以下 HTML 结构中的第二个 <li> 元素：

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

我们可以使用以下 CSS 代码：

li:nth-child(2) {
  color: red;
}

这将会选取第二个 <li> 元素，将其文字颜色设置为红色。

与此类似，我们还可以使用表达式 2n+1 来选取所有奇数位置的 <li> 元素：

li:nth-child(2n+1) {
  color: blue;
}

这将会选取第一个、第三个、第五个和第七个 <li> 元素，将其文字颜色设置为蓝色。

:nth-of-type() 选择器

与 nth-child() 选择器不同，nth-of-type() 选择器是选取相同类型的兄弟元素中的第 n 个。其语法如下：

selector:nth-of-type(n)

其中，selector 和 n 的含义与 nth-child() 选择器相同。

举个例子，我们想选取以下 HTML 结构中的第二个 <p> 元素：

<div>
  <p>paragraph 1</p>
  <span>span 1</span>
  <p>paragraph 2</p>
  <span>span 2</span>
</div>

我们可以使用以下 CSS 代码：

p:nth-of-type(2) {
  color: green;
}

这将会选取第二个 <p> 元素，将其文字颜色设置为绿色。

最后，我们可以使用 odd 或 even 关键字来快速选取所有奇数或偶数位置的相同类型兄弟元素。例如：

span:nth-of-type(odd) {
  color: purple;
}

这将会选取 <span> 元素中所有奇数位置的元素，将其文字颜色设置为紫色。

总结

• :nth-child() 选择器选取某个元素的第 n 个子元素，可以使用表达式 an+b 来选取特定位置的子元素。
• :nth-of-type() 选择器选取某个元素的第 n 个相同类型的兄弟元素，也可以使用 odd 和 even 来选取所有奇数或偶数位置的相同类型兄弟元素。