如何使用 CSS nth-child 选择器选择多个元素_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-17

浏览次数：次

返回列表

如何使用 css nth-child 选择器选择多个元素

本文旨在清晰地解释 CSS 中 `nth-child` 选择器的用法，并重点介绍如何选择多个特定的子元素。我们将探讨 `nth-child` 的基本语法，以及如何通过不同的方式选择连续或非连续的多个元素，并提供实际的代码示例，帮助你更好地理解和应用该选择器。

CSS 的 nth-child 选择器是一个强大的工具，允许你根据元素在其父元素中的位置来选择元素。然而，直接使用逗号分隔的多个数字（例如 nth-child(2, 3)）来选择多个元素是不正确的。本文将介绍几种有效的方法来实现选择多个特定子元素的目的。

选择连续的多个子元素

要选择连续的多个子元素，最直接的方法是使用逗号分隔多个 nth-child 选择器。例如，要选择父元素下的第 2 个和第 3 个

元素，你可以这样做：

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 元素下的第二个

元素，而 div.modal-content > p:nth-child(3) 选择器会选择第三个

元素。这两个选择器通过逗号,分隔，使得两个规则可以同时生效。

选择非连续的多个子元素

与选择连续元素类似，选择非连续的子元素也需要使用逗号分隔的多个 nth-child 选择器。例如，要选择父元素下的第 3 个和第 5 个

元素，你可以这样做：

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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2401">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176378189624798.png" alt="察言观数AskTable">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2401">察言观数AskTable</a>
                            <p>企业级AI数据表格智能体平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="察言观数AskTable">
                                <span>78</span>
                            </div>
                        </div>
                        <a href="/ai/2401" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="察言观数AskTable">
                        </a>
                    </div>
                
  <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 个

元素的背景颜色将被设置为红色，文本颜色设置为白色。

注意事项

nth-child 选择器是基于元素在其父元素中的位置进行选择的。这意味着元素的类型很重要，例如，p:nth-child(2) 只会选择作为父元素第二个子元素的
元素。
nth-child 选择器从 1 开始计数，而不是从 0 开始。
需要注意的是，在复杂的HTML结构中，:nth-child 可能不会按照你预期的那样工作。例如，如果div.modal-content 中除了
标签，还有其他标签，那么 :nth-child(n) 选择的是父元素下的第n个子元素，而不管该子元素是不是

标签。如果想选择特定类型的第n个子元素，可以使用 :nth-of-type(n)。