如何在CSS中不为标签加类，给多个元素设置不同背景色？

当然有！不用给每个section额外加类，靠CSS伪类就能轻松实现，下面是几种常用方案：

1. 使用:nth-child()伪类 #

这个伪类可以精准选中父元素下的第n个子元素，直接给对应位置的section设置背景色：

div > section:nth-child(1) { background-color: blue; }
div > section:nth-child(2) { background-color: red; }
div > section:nth-child(3) { background-color: black; }
div > section:nth-child(4) { background-color: beige; }
div > section:nth-child(5) { background-color: blue; }

对应的HTML完全不用加类：

<div>
   <section>Block 1</section>
   <section>Block 2</section>
   <section>Block 3</section>
   <section>Block 4</section>
   <section>Block 5</section>
</div>

2. 使用:nth-of-type()伪类（更稳妥的场景） #

如果父元素里除了section还有其他类型的元素，用:nth-of-type()更合适——它只匹配同类型的子元素，不会被其他标签干扰：

div > section:nth-of-type(1) { background-color: blue; }
div > section:nth-of-type(2) { background-color: red; }
div > section:nth-of-type(3) { background-color: black; }
div > section:nth-of-type(4) { background-color: beige; }
div > section:nth-of-type(5) { background-color: blue; }

HTML同样保持干净，就算中间插个<p>标签，也不会影响section的颜色匹配。

3. 简化重复颜色的写法 #

如果你的颜色有重复规律（比如示例里第1、5个都是蓝色），可以用nth-child(an + b)的语法批量匹配：

/* 匹配第1、6、11...个section */
div > section:nth-child(5n + 1) { background-color: blue; }
div > section:nth-child(2) { background-color: red; }
div > section:nth-child(3) { background-color: black; }
div > section:nth-child(4) { background-color: beige; }

这种写法更简洁，后续如果新增section，符合规律的元素会自动应用对应颜色。

4. 结合CSS变量管理颜色 #

如果需要频繁修改颜色，可以把颜色值集中定义在父元素的CSS变量里，再通过伪类赋值：

div {
  --color-1: blue;
  --color-2: red;
  --color-3: black;
  --color-4: beige;
  --color-5: blue;
}

div > section:nth-child(1) { background-color: var(--color-1); }
div > section:nth-child(2) { background-color: var(--color-2); }
div > section:nth-child(3) { background-color: var(--color-3); }
div > section:nth-child(4) { background-color: var(--color-4); }
div > section:nth-child(5) { background-color: var(--color-5); }

后期改颜色只需要修改变量值，不用逐个调整每个伪类的样式。

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