如何为带递增类名的动态HTML元素设置CSS样式？

不用给每个带后缀的类单独写CSS，有几种更高效的方式：

• 用CSS属性选择器匹配类名前缀
  直接用[class^="switch-field"]选择所有类名以switch-field开头的元素，或者[class*="switch-field"]选择所有包含switch-field的元素（前者更精准，后者可能匹配到其他带该字符串的类，比如x-switch-field，视你的命名规范选择）。示例：

  [class^="switch-field"] {
    /* 原.switch-field的通用样式 */
    background-color: #eee;
    padding: 8px;
    /* ...其他通用样式 */
  }
  /* 若需给特定后缀的元素加特殊样式，单独补充 */
  .switch-field2 {
    border-color: #2196F3;
  }
  

  不管你动态加的后缀是1、2还是n，所有带前缀的元素都会自动应用通用样式，无需修改CSS结构。

• 保留通用类，后缀类做样式扩展
  别替换掉原有的switch-field类，而是同时添加通用类和带后缀的类：

  modsb.classList.add("switch-field", `switch-field-${i}`);
  

  CSS里把基础样式写在.switch-field中，特殊样式写在.switch-field-1、.switch-field-2等后缀类里，既复用了基础样式，又能给个别元素做定制化调整，结构更清晰。

• 动态生成CSS（不推荐）
  如果你非要动态创建带后缀的类样式，可以用JS生成style标签插入页面：

  const styleEl = document.createElement('style');
  styleEl.textContent = `.switch-field${i} {
    /* 你的定制样式 */
    color: #fff;
    background-color: #4CAF50;
  }`;
  document.head.appendChild(styleEl);
  

  但这种方法会让样式分散在JS中，不利于后期维护，除非特殊场景否则不建议使用。

另外要说明：原生CSS是静态的，无法直接写${i}或者#i这类变量语法；如果用Sass/Less这类预处理器，可以通过循环生成带后缀的类，但纯原生前端就用上面的方法即可。

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