能否用CSS数学/计数器函数为同块代码中每个li设不同背景色？

当然可以实现，不过得靠CSS的自定义属性配合计数器和calc()函数，或者用nth-child()结合CSS变量的技巧——本质都是利用元素的索引值来生成不同颜色。

方法一：计数器+calc()生成渐变色彩 #

先给父元素初始化计数器，每个<li>递增计数器后，用计数器值计算RGB分量，就能生成渐变式的不同背景色：

ul {
  counter-reset: li-index; /* 初始化计数器 */
}

li {
  counter-increment: li-index; /* 每个li让计数器+1 */
  /* 通过计数器值计算RGB三个通道的数值 */
  background-color: rgb(
    calc(255 - counter(li-index) * 50),
    calc(counter(li-index) * 60),
    calc(100 + counter(li-index) * 30)
  );
}

方法二：CSS变量+伪类实现固定自定义颜色 #

如果你想要像示例里那样固定的红、蓝、黄、绿这类离散颜色，没法完全只用单个li选择器，但可以用CSS变量简化写法，比逐个写伪类清爽很多：

li {
  --bg-color: red; /* 默认颜色 */
  background-color: var(--bg-color);
}
li:nth-child(2) { --bg-color: blue; }
li:nth-child(3) { --bg-color: yellow; }
li:nth-child(4) { --bg-color: green; }

这种写法把颜色值抽成变量，只需要给不同索引的<li>修改变量值，维护起来更方便。

方法三：HSL色相计算生成离散基础色 #

如果不需要固定自定义色，只是要每个<li>颜色不同，还可以用HSL颜色模式，通过calc()计算色相值，自动生成不同基础色：

ul {
  counter-reset: li-index;
}

li {
  counter-increment: li-index;
  /* 每60度色相递增，生成红、黄、绿、蓝这类区分度高的颜色 */
  background-color: hsl(calc(counter(li-index) * 60), 80%, 60%);
}

注意事项 #

CSS的counter()函数目前没法直接在颜色属性里做复杂的条件判断，所以没法在单个li选择器里直接把计数器值映射到你指定的固定离散色（比如第1个红、第2个蓝这种），只能通过渐变计算或者伪类+变量的方式实现。

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