如何用CSS nth-child选择器实现每3元素一组的背景色交替（无需额外类）

AI 小北

2026-5-9

嘿，这个需求用纯CSS的:nth-child()选择器就能完美实现，完全不用给元素加额外类，我给你捋清楚思路和代码：

核心思路

你的需求是每6个元素为一个大循环周期（3红 + 3白），所以我们可以利用:nth-child()的周期匹配语法——an + b，其中a是周期长度，b是周期内的位置偏移，通过这个语法就能精准定位到每一组需要变色的元素。

实现代码

先给元素加一些基础样式（可选，方便直观看到效果），再通过:nth-child()设置背景色：

/* 基础样式，可根据自己的需求调整 */
.item {
  padding: 1.2rem;
  margin: 0.6rem 0;
  border-radius: 4px;
  border: 1px solid #eee;
}

/* 匹配每6个元素里的第1、2、3个（对应红色组：1-3,7-9,13-15...） */
.item:nth-child(6n + 1),
.item:nth-child(6n + 2),
.item:nth-child(6n + 3) {
  background-color: #ff3a3a; /* 自定义红色，可替换成你需要的色值 */
}

/* 匹配每6个元素里的第4、5、6个（对应白色组：4-6,10-12...） */
.item:nth-child(6n + 4),
.item:nth-child(6n + 5),
.item:nth-child(6n + 6) {
  background-color: #ffffff; /* 自定义白色，可替换 */
}

简化写法（更高效）

如果白色是元素的默认背景色，那我们可以只写红色组的规则，让白色用默认样式，代码会更简洁：

.item {
  padding: 1.2rem;
  margin: 0.6rem 0;
  border-radius: 4px;
  border: 1px solid #eee;
  background-color: #ffffff; /* 默认白色 */
}

.item:nth-child(6n + 1),
.item:nth-child(6n + 2),
.item:nth-child(6n + 3) {
  background-color: #ff3a3a; /* 红色覆盖默认样式 */
}