CSS如何精简属性值相同的多个选择器的重复样式代码

你的第二种逗号分隔同组选择器的写法，已经比逐一声明每个标题的第一种写法精简很多，在此基础上还有可维护性更高、代码更简洁的实现方式，核心优化思路是抽离公共选择器前缀、复用通用样式值、分离特殊样式与公共样式，这套思路可以复用到绝大多数CSS重复规则的优化场景里。

具体实现方案 #

方案1：使用:is()伪类简化选择器 #

:is()伪类可以把多个同前缀的选择器合并，避免重复书写父级选择器路径，所有现代浏览器都已完美支持：

/* h1 单独特殊样式 */
.article-heading > div h1 {
  margin-bottom: 12px !important;
}

/* h2-h6 共用样式 不用重复写父级路径 */
.article-heading > div :is(h2, h3, h4, h5, h6) {
  margin: 24px 0 12px 0 !important;
}

如果之后你要给所有标题加通用样式（比如统一的行高、字重），还可以加一段所有h1-h6的公共规则，不用逐一声明：

.article-heading > div :is(h1, h2, h3, h4, h5, h6) {
  /* 所有标题通用的样式写在这里，例如 line-height: 1.5; font-weight: 600; */
}

方案2：搭配CSS变量提升可维护性 #

如果你之后可能统一调整标题间距，用CSS自定义属性（变量）存间距值是更好的选择，修改的时候只需要改变量值，不用逐个找样式声明修改：

/* 在父级作用域定义间距变量 */
.article-heading {
  --heading-gap-top: 24px;
  --heading-gap-bottom: 12px;
}

.article-heading > div h1 {
  margin: 0 0 var(--heading-gap-bottom) 0 !important;
}

.article-heading > div :is(h2, h3, h4, h5, h6) {
  margin: var(--heading-gap-top) 0 var(--heading-gap-bottom) 0 !important;
}

额外优化建议 #

• 尽量减少!important的使用：如果样式被其他规则覆盖，优先通过提升选择器优先级的方式处理，大量使用!important会导致后续维护时样式覆盖逻辑混乱，调试成本很高
• 合并规则时不要过度追求短代码：比如不要直接用.article-heading > div *这类通配选择器给所有子元素加标题样式，避免影响后续新增的其他元素，明确指定h1-h6的选择器可读性和稳定性更好
• 这套抽离公共规则、复用固定值的思路，不止适用于标题样式：开发时遇到多选择器共用同一段样式、多处使用同一个固定色值/间距/字号的场景，都可以用选择器合并、CSS变量的方式优化，减少冗余代码。

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