本文旨在清晰地解释 CSS 中 `nth-child` 选择器的用法，并重点介绍如何选择多个特定的子元素。我们将探讨 `nth-child` 的基本语法，以及如何通过不同的方式选择连续或非连续的多个元素，并提供实际的代码示例，帮助你更好地理解和应用该选择器。
CSS 的 nth-child 选择器是一个强大的工具，允许你根据元素在其父元素中的位置来选择元素。 然而，直接使用逗号分隔的多个数字（例如 nth-child(2, 3)）来选择多个元素是不正确的。 本文将介绍几种有效的方法来实现选择多个特定子元素的目的。
选择连续的多个子元素
要选择连续的多个子元素，最直接的方法是使用逗号分隔多个 nth-child 选择器。 例如，要选择父元素下的第 2 个和第 3 个 <p> 元素，你可以这样做：
div.modal-content > p:nth-child(2),
div.modal-content > p:nth-child(3) {
background-color: red;
}在这个例子中，div.modal-content > p:nth-child(2) 选择器会选择 div.modal-content 元素下的第二个 <p> 元素，而 div.modal-content > p:nth-child(3) 选择器会选择第三个 <p> 元素。 这两个选择器通过逗号,分隔，使得两个规则可以同时生效。
立即学习“前端免费学习笔记（深入）”；
选择非连续的多个子元素
与选择连续元素类似，选择非连续的子元素也需要使用逗号分隔的多个 nth-child 选择器。 例如，要选择父元素下的第 3 个和第 5 个 <p> 元素，你可以这样做：
div.modal-content > p:nth-child(3),
div.modal-content > p:nth-child(5) {
background-color: red;
}这个方法同样适用于选择任意数量的非连续元素。
理解 nth-child(n+...) 的用法
虽然 nth-child(n+...) 主要用于选择从某个位置开始的所有元素，但它也可以与其他选择器结合使用，以实现更复杂的效果。 例如，要选择从第 2 个元素开始的所有元素，可以使用 nth-child(n+2)。 然而，这并不能直接用于选择特定的多个非连续元素。
示例代码
以下是一个完整的示例，展示了如何使用 nth-child 选择器来选择多个元素：
<!DOCTYPE html>
<html>
<head>
<style>
div.modal-content > p:nth-child(2),
div.modal-content > p:nth-child(3),
div.modal-content > p:nth-child(5) {
background-color: red;
color: white;
}
</style>
</head>
<body>
<div class="modal-content">
<span class="close-button">Button Example</span>
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
<p>Element 4</p>
<p>Element 5</p>
<p>Element 6</p>
</div>
</body>
</html>在这个示例中，第 2、3 和 5 个 <p> 元素的背景颜色将被设置为红色，文本颜色设置为白色。
注意事项
- nth-child 选择器是基于元素在其父元素中的位置进行选择的。 这意味着元素的类型很重要，例如，p:nth-child(2) 只会选择作为父元素第二个子元素的 <p> 元素。
- nth-child 选择器从 1 开始计数，而不是从 0 开始。
- 需要注意的是，在复杂的HTML结构中，:nth-child 可能不会按照你预期的那样工作。 例如，如果div.modal-content 中除了 <p> 标签，还有其他标签，那么 :nth-child(n) 选择的是父元素下的第n个子元素，而不管该子元素是不是 <p> 标签。如果想选择特定类型的第n个子元素，可以使用 :nth-of-type(n)。
总结
虽然 nth-child 选择器本身不能直接接受多个数字作为参数来选择多个元素，但通过使用逗号分隔多个 nth-child 选择器，你可以轻松地选择连续或非连续的多个子元素。 理解 nth-child 选择器的基本语法和注意事项，将帮助你更有效地使用 CSS 来控制网页的样式。
