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

新闻中心 NEWS CENTER

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

CSS nth-child 选择器：如何选择多个元素？

2025-10-17

浏览次数：次

返回列表

css nth-child 选择器：如何选择多个元素？

本文旨在清晰阐述如何使用 CSS 的 `nth-child` 选择器来选取多个特定的子元素，并应用样式。文章将介绍 `nth-child` 的基本用法，以及如何通过不同的技巧和组合来实现选择多个连续或非连续的子元素，并提供相应的示例代码。

nth-child 是 CSS 中一个非常强大的伪类选择器，它允许我们根据元素在其父元素中的位置来选择元素。虽然 nth-child(n) 可以灵活地选择元素，但直接使用逗号分隔多个数字，例如 nth-child(2, 3)，是无效的。那么，如何才能使用 nth-child 选择器选择多个元素呢？

选择多个连续的子元素

最直接的方法是使用逗号 , 将多个 nth-child 选择器连接起来。例如，要选择父元素 div.modal-content 下的第 2 个和第 3 个

元素，可以这样写：

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

这段代码会将第 2 个和第 3 个

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

示例：

考虑以下 HTML 结构：

<div class="modal-content">
  <span class="close-button">Button Example</span>
  <p>Element 2</p>
  <p>Element 3</p>
  <p>Element 4</p>
  <p>Element 5</p>
  <p>Element 6</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>
                
</div>

应用上述 CSS 后，只有 "Element 2" 和 "Element 3" 的背景颜色会变为红色。注意标签也会被计算在内，因为它也是 div.modal-content 的子元素。

选择多个非连续的子元素

同样，可以使用逗号 , 将多个 nth-child 选择器连接起来，以选择非连续的子元素。例如，要选择第 3 个和第 5 个

元素，可以这样写：

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

这段代码会将第 3 个和第 5 个

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

示例：

继续使用上面的 HTML 结构，应用上述 CSS 后，只有 "Element 3" 和 "Element 5" 的背景颜色会变为红色。

使用 nth-child(an + b) 选择器

nth-child(an + b) 是一种更高级的用法，其中 a 和 b 是整数。 n 代表从 0 开始的自然数（0, 1, 2, 3, ...）。这个表达式允许你选择一个模式的元素。

例如，nth-child(2n) 会选择所有偶数位置的元素（2, 4, 6, ...），而 nth-child(2n + 1) 会选择所有奇数位置的元素（1, 3, 5, ...）。

要选择一组连续的元素，可以使用多个 nth-child 选择器配合使用。例如，要选择第 2 个到第 4 个元素，可以这样写：

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

虽然 nth-child(an + b) 本身不能直接选择连续的多个元素，但是结合其他选择器可以实现更复杂的选择模式。

注意事项

nth-child 选择器是基于元素在其父元素中的位置进行选择的，这意味着如果父元素中包含不同类型的子元素，它们都会被计算在内。
nth-child 选择器从 1 开始计数，而不是从 0 开始。
nth-child 选择器区分大小写。

总结

虽然 nth-child 选择器本身不能直接使用逗号分隔的多个数字来选择元素，但可以通过将多个 nth-child 选择器用逗号连接起来，或者使用 nth-child(an + b) 表达式来实现选择多个元素的目的。理解 nth-child 的工作原理以及如何与其他选择器组合使用，可以帮助你更精确地控制 CSS 样式。

以上就是CSS nth-child 选择器：如何选择多个元素？的详细内容，更多请关注其它相关文章！

# 会将 # 武城营销网站建设 # 盐城网站建设代理商 # 阜宁铁军纪念馆网站建设 # 大学信息网站建设流程 # 天河建设网站价格 # 高淳家装网站建设 # 重庆抖音seo方法 # 静海家装网站建设 # 南戴河网站网络推广 # 沈阳seo搜索栏黑科技 # 来实现 # css # 设置为 # 可以使用 # 这段 # 单选框 # 如何选择 # 表单 # 选择器 # 多个 # red # 伪类选择器 # html