CSS中如何聚合同一ID下的多个类选择器简化样式编写？

原生CSS实现 #

你想要的“聚合同ID下多个类选择器、减少#common_id 前缀重复书写”的能力，原生CSS已有成熟实现，可通过:is() 伪类完成聚合。

原有冗余写法：

#common_id .class_1,
#common_id .class_2,
#common_id .class_3 {
  padding: 1em;
  border: 1px dotted gray;
}

可直接等价简化为：

#common_id :is(.class_1, .class_2, .class_3) {
  padding: 1em;
  border: 1px dotted gray;
}

注意要点 #

• 匹配逻辑完全对齐：该写法的选择范围、样式生效规则，和逐行书写前缀的冗余写法完全等价，会选中ID为common_id 元素下所有带class_1/class_2/class_3 的后代元素。
• 权重无变化：:is() 伪类的优先级取括号内最高权重值，此处括号内均为类选择器，搭配外层ID选择器计算出的整体样式权重，和手写逐行书写的#common_id .类 权重完全一致，不会出现样式优先级错乱问题。
• 语法细节：:is() 前必须保留和#common_id 之间的空格，代表后代选择关系；如果去掉空格写成#common_id:is(...)，匹配逻辑会变为选中id="common_id" 且同时带对应类的元素，和实际需求不匹配。

CSS预处理器实现 #

如果项目使用Sass、Less这类CSS预处理器，可通过嵌套语法简化书写，编译后生成的CSS和原冗余写法完全一致：

#common_id {
  .class_1, .class_2, .class_3 {
    padding: 1em;
    border: 1px dotted gray;
  }
}

补充：你期待的类似#common_id .class_1 and .class_2 的直接关联写法，目前原生CSS并未定义这类语法，:is() 是最贴合这类聚合需求的原生能力，现代主流浏览器均已支持，仅在需要兼容2020年之前发布的老旧浏览器时需要做降级处理。

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