CSS nth-child()多元素选择方法及子元素计数规则解惑

1. 父元素中的 <span> 会被算作第1个子元素吗？ #

是的，所有直接子元素（无论标签类型）都会被纳入 :nth-child 的计数序列。你代码里的 <span> 是 .modal-content 的第一个直接子元素，因此后续的 <p> 依次是第2、3、4、5、6个子元素——这也是你写 p:nth-child(2) 能选中第一个 <p> 的原因。

2. 如何用 :nth-child() 一次性选择多个子元素？ #

:nth-child() 本身不支持直接写逗号（比如你尝试的 nth-child(2,3) 是无效语法），但可以通过两种方式实现批量选择：

选择连续的子元素（如第2、3个） #

有两种可行方案：

• 方案一：逗号分隔多个 :nth-child 选择器

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

• 方案二：结合范围公式精准筛选

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

解释：nth-child(n+2) 选中从第2个开始的所有元素，nth-child(-n+3) 选中前3个元素，两者的交集就是第2、3个目标元素。

选择不连续的子元素（如第3、5个） #

对于无规律的零散元素，只能通过逗号分隔多个选择器实现：

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

如果是有规律的不连续元素（比如奇数位、每隔3个选1个），可以用公式简化：比如 nth-child(2n+1) 选中所有奇数位元素，nth-child(3n+1) 选中第1、4、7...位元素。

补充：为什么 nth-child(n+数字) 没达到预期效果？ #

你直接使用 nth-child(n+2) 时，会选中从第2个开始的所有 <p>（也就是代码里的全部 <p>）。如果只想选前几个连续元素，必须结合 -n+X 来限制上限，比如前面提到的 nth-child(n+2):nth-child(-n+3)。

内容的提问来源于stack exchange，提问作者Snorlax