求助：如何使用nth-child选择器选中从第1个开始的每3个连续元素？

嘿，我完全懂你要的效果——从第1个元素开始，每3个连续的元素为一组（比如第1-3个、4-6个、7-9个……）都标蓝，对吧？这个用CSS的:nth-child()选择器组合就能精准实现，我给你拆解清楚：

核心解决方案 #

假设你的目标元素都在同一个父容器下（比如<ul>里的<li>，或者<div>里的子元素），直接组合三个:nth-child()选择器就能覆盖每一组的三个连续元素：

/* 选中每组的第1个元素：1、4、7、10... */
.target-element:nth-child(3n+1),
/* 选中每组的第2个元素：2、5、8、11... */
.target-element:nth-child(3n+2),
/* 选中每组的第3个元素：3、6、9、12... */
.target-element:nth-child(3n+3) {
  background-color: blue; /* 你的标蓝样式 */
}

特殊需求的调整（可选） #

如果你的需求是每隔3个元素，再选中连续3个（比如1-3、7-9、13-15……），那只需要把公式里的3n改成6n就行：

.target-element:nth-child(6n+1),
.target-element:nth-child(6n+2),
.target-element:nth-child(6n+3) {
  background-color: blue;
}

为什么之前的尝试可能失败？ #

很多人会误以为只用一个:nth-child()就能选中连续的多个元素，但:nth-child()的公式是针对单个元素位置的，所以必须组合多个选择器来覆盖连续的位置。另外要注意两个关键点：

• 确保目标元素都是同一个父容器的直接子元素，:nth-child()是基于父元素的子元素顺序计算的，嵌套结构会打乱位置计数。
• 如果父容器里混合了不同类型的元素（比如同时有<p>和<div>），可以用:nth-of-type()代替:nth-child()，它会按元素类型单独计算位置。

举个实际的HTML例子，效果一目了然：

<div class="container">
  <div class="target-element">1</div>
  <div class="target-element">2</div>
  <div class="target-element">3</div>
  <div class="target-element">4</div>
  <div class="target-element">5</div>
  <div class="target-element">6</div>
  <div class="target-element">7</div>
</div>

用第一个CSS代码，所有元素都会被标蓝；用第二个代码，只有1、2、3、7（后续的13-15等）会被标蓝。

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