能否通过CSS的@apply指令将h1样式复用至自定义类.my-class？

首先明确：原生CSS里曾经有过@apply指令的提案，但这个提案已经被废弃，现在不能在生产环境中使用。不过你要的需求完全可以通过其他方式实现，下面给你两种靠谱的方案：

方案一：原生CSS自定义变量（推荐无预处理器场景） #

把h1的样式拆解成自定义变量，然后分别在h1和.my-class中引用这些变量，这样既不用修改h1的选择器，也能保证两者样式一致：

/* 先在根元素定义h1的样式变量 */
:root {
  --h1-font-size: 30px;
  --h1-font-weight: 700;
  --h1-line-height: 1.2;
  --h1-color: #2d3748;
  /* 把h1所有需要复用的样式都转成变量 */
}

/* 基础h1样式 */
h1 {
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  color: var(--h1-color);
  /* 其他专属h1的样式（如果有的话） */
}

/* 条件加载的.my-class */
.my-class {
  /* 直接引用h1的样式变量 */
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  color: var(--h1-color);
  /* 如果需要，还可以添加.my-class的专属样式 */
}

这种方式完全基于原生CSS，不需要额外工具，适合不想引入预处理器的项目。

方案二：CSS预处理器混入（Mixin，推荐有预处理器场景） #

如果你的项目用了Sass、Less这类预处理器，用混入功能会更高效，直接把h1的样式封装成一个可复用的块，然后分别在h1和.my-class中调用：

Sass示例： #

// 定义h1样式的混入
@mixin h1-styles {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: #2d3748;
  /* ...其他h1样式 */
}

// 给h1应用混入
h1 {
  @include h1-styles;
}

// 条件加载的.my-class应用同一个混入
.my-class {
  @include h1-styles;
}

编译后的CSS会自动把混入里的样式分别注入到h1和.my-class的规则中，完美满足你“不修改h1选择器、条件加载复用样式”的需求。

Less示例： #

// 定义h1样式的混入
.h1-styles() {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: #2d3748;
  /* ...其他h1样式 */
}

// 给h1应用混入
h1 {
  .h1-styles();
}

// 条件加载的.my-class应用同一个混入
.my-class {
  .h1-styles();
}

注意事项 #

• 原生CSS没有“直接继承另一个选择器所有样式”的功能，只能通过变量或者预处理器来间接实现。
• 不要尝试用@apply，它已经从标准中移除，主流浏览器都不支持了。

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