如何使用 CSS 的 nth-child 选择器选取多个元素

本文旨在清晰地阐述 CSS 中 `nth-child` 选择器的用法，特别是在需要同时选取多个特定子元素时。我们将深入探讨如何通过组合不同的选择器来实现这一目标，并提供实用的代码示例，帮助开发者更好地理解和应用 `nth-child` 选择器，从而更灵活地控制页面元素的样式。

nth-child 是 CSS 中一个强大的伪类选择器，它允许你根据元素在其父元素中的位置来选取元素。然而，nth-child 的直接使用并不支持一次性选取多个非连续的子元素。本文将介绍如何通过组合 CSS 选择器来达到选取多个特定子元素的目的。

基本用法回顾

在深入探讨如何选取多个元素之前，我们先回顾一下 nth-child 的基本用法。nth-child(n) 选择器选取父元素下的第 n 个子元素。例如，p:nth-child(2) 会选取父元素下的第二个

元素。

选取多个连续的子元素

虽然 nth-child 本身不能直接接受多个参数，但我们可以通过使用逗号分隔的选择器列表来实现选取多个元素的目的。例如，要选取父元素下的第二个和第三个

元素，可以这样写：

div.modal-content > p:nth-child(2),
div.modal-content > p:nth-child(3) {
  background-color: red;
}

这段代码会将类名为 modal-content 的 div 元素下的第二个和第三个

元素的背景颜色设置为红色。

选取多个非连续的子元素

同样，要选取非连续的子元素，只需将对应的 nth-child 选择器用逗号分隔即可。例如，要选取父元素下的第三个和第五个

元素，可以这样写：

div.modal-content > p:nth-child(3),
div.modal-content > p:nth-child(5) {
  background-color: red;
}

示例代码

以下是一个完整的 HTML 示例，展示了如何使用 nth-child 选取多个元素：

  Button Example
  
Element 1
  
Element 2
  
Element 3
  
Element 4
  
Element 5
  
Element 6

在这个例子中，第二个、第三个和第五个

元素的背景颜色会被设置为红色。

注意事项

• nth-child 选择器是基于元素在父元素中的位置来选择的，因此要确保选择器的父元素正确。
• 注意子元素的类型。例如，p:nth-child(2) 只会选择父元素下的第二个

  元素，如果第二个子元素不是

  元素，则不会被选中。

• nth-child(n) 中的 n 可以是数字、关键字（odd 或 even）或一个公式（例如 2n+1）。

总结

虽然 nth-child 不能直接接受多个参数来选取多个元素，但我们可以通过使用逗号分隔的选择器列表来实现这一目标。这种方法简单有效，可以灵活地选取多个连续或非连续的子元素，从而更好地控制页面元素的样式。掌握 nth-child 的用法，可以让你在 CSS 样式编写中更加得心应手。