如何使用 CSS 的 nth-child 选择器选取多个元素-html教程-PHP中文网

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

聖光之護

发布： 2025-10-16 11:51:24

原创

897人浏览过

如何使用 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 元素下的第二个和第三个 元素的背景颜色设置为红色。

选取多个非连续的子元素

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

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

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

登录后复制

示例代码

以下是一个完整的 HTML 示例，展示了如何使用 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;
}
</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>

登录后复制

在这个例子中，第二个、第三个和第五个 元素的背景颜色会被设置为红色。

注意事项