如何一次性为div#uniform下的500个ID批量设置CSS样式？

不需要手动给每个#id1到#id500的选择器逐个添加#uniform前缀，有几种高效的快捷方式：

• 编辑器正则批量替换
  用主流代码编辑器（比如VS Code）的正则替换功能，几步就能完成批量修改：

  1. 打开查找替换面板（快捷键Ctrl+Shift+F或Cmd+Shift+F）
  2. 勾选「正则表达式」选项
  3. 查找内容输入：^#id(\d+)
  4. 替换内容输入：#uniform #id$1
  5. 点击「全部替换」，瞬间就能把所有#idN格式的选择器替换成#uniform #idN

• CSS预处理器嵌套语法
  如果用Sass、Less这类预处理器，可以把所有#id1到#id500的样式代码包裹在#uniform的嵌套块中，预处理器编译时会自动为内部的每个选择器加上父级前缀：

  #uniform {
    #id1 {
      color: red;
      /* 原#id1的所有样式 */
    }
    #id2 {
      font-size: 16px;
      /* 原#id2的所有样式 */
    }
    // ... 依次放入#id3到#id500的样式
  }
  

  这种方式适合还没编写完样式的场景，能从根源避免重复写前缀。

• CSS :is()选择器（适用于通用样式场景）
  如果多个ID有共用样式，不想修改原有选择器结构，可以用:is()选择器把所有目标ID打包，统一限定在#uniform内部：

  #uniform :is(#id1, #id2, #id3, ..., #id500) {
    /* 这里写所有ID共用的样式 */
  }
  

  注意：如果每个ID的样式各不相同，这种方式就不适用。

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