能否通过CSS根据含数字的类名筛选元素并周期性设置样式？

完全可以实现需求，下面给两种实用方法：

一、JS 方案（灵活适配任意循环周期） #

直接提取类名里的数字，计算模值后对应颜色，不管循环周期n是多少都能用：

// 获取所有带actor-前缀的circle元素
const actors = document.querySelectorAll('circle[class*="actor-"]');

// 定义循环用的颜色列表，列表长度就是循环周期n（这里设为3）
const colors = ['red', 'yellow', 'blue'];

actors.forEach(actor => {
  // 从类名里提取数字部分
  const num = parseInt(actor.className.match(/actor-(\d+)/)[1], 10);
  // 计算模值对应颜色索引
  const colorIdx = num % colors.length;
  // 给元素设置填充色
  actor.style.fill = colors[colorIdx];
});

二、CSS 方案（适合固定循环周期的场景） #

如果循环周期n固定（比如就是3），直接用CSS属性选择器匹配类名末尾数字即可，无需编写JS：

/* 匹配actor-0、3、6...这类数字模3余0的元素 */
circle[class$="-0"],
circle[class$="-3"],
circle[class$="-6"],
circle[class$="-9"] {
  fill: red;
}

/* 匹配actor-1、4、7...这类数字模3余1的元素 */
circle[class$="-1"],
circle[class$="-4"],
circle[class$="-7"] {
  fill: yellow;
}

/* 匹配actor-2、5、8...这类数字模3余2的元素 */
circle[class$="-2"],
circle[class$="-5"],
circle[class$="-8"] {
  fill: blue;
}

注意事项 #

• CSS里的[class$="-x"]是匹配类名以"-x"结尾，像actor-10这类元素会被[class$="-0"]命中，刚好符合模3余0的要求，不会出错。
• 要是循环周期n很大，CSS需要编写大量重复选择器，此时优先用JS方案更高效。

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