如何使用通配符合并多个margin-bottom CSS规则，不可行时有哪些替代方案

问题结论 #

原生CSS无法通过通配符实现你要的效果。CSS的属性选择器仅支持匹配符合规则的类名，不支持捕获类名中的动态片段作为属性值注入到样式规则中。

替代方案 #

• 方案1：使用CSS预处理器（以Sass/SCSS为例） #

  直接用循环批量生成规则，仅需几行代码就能生成全部20条样式，示例代码如下：

  @for $i from 1 through 20 {
    .margin-bottom-#{$i}rem {
      margin-bottom: #{$i}rem;
    }
  }
  

  上述代码编译后会自动生成你需要的全部20条CSS规则，无需手动逐条编写。

• 方案2：使用CSS变量实现动态通用类 #

  定义一个通用的margin-bottom工具类，配合CSS变量动态传值，不需要预先定义所有尺寸的类：

  .margin-bottom {
    margin-bottom: var(--mb-value, 1rem);
  }
  

  使用时直接在元素上指定变量值即可：

  <div class="margin-bottom" style="--mb-value: 5rem;">示例内容</div>
  

• 方案3：使用现成的原子化CSS框架 #

  比如Tailwind CSS这类原子化框架本身就内置了全量的间距工具类，你可以直接用mb-[1rem]到mb-[20rem]这类类名，无需自己编写任何样式规则。

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