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 个 <p> 元素，可以这样写：

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

这段代码会将第 2 个和第 3 个 <p> 元素的背景颜色设置为红色。

立即学习“前端免费学习笔记（深入）”；

示例：

考虑以下 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>

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

选择多个非连续的子元素

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

腾讯元宝

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

223

查看详情

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

这段代码会将第 3 个和第 5 个 <p> 元素的背景颜色设置为红色。

示例：

继续使用上面的 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 选择器：如何选择多个元素？的详细内容，更多请关注php中文网其它相关文章！