css - 你如何让一个css类继承另一个类的所有值而不改变原来的类

Question

我正在尝试通过浏览器源将网站导入 OBS Studio。不幸的是，我正在导入的网站通过为网站的 html 元素提供 class 设置为浅色主题tw-root--theme-light。

这可以通过将此类更改为非常轻松地进行更改，tw-root--theme-dark但 OBS Studio 不允许您编辑 html。我只能附加 CSS。

是否可以覆盖类tw-root--theme-light以继承其所有值tw-root--theme-dark？

Answer 1

在纯 CSS 中，无法从另一个类继承所有值。

CSS 继承是从父元素到子元素，这不适用于 CSS 类等规则集。

我们可以使用诸如 Sass 和 LESS 之类的 CSS 预处理器，通过扩展类来实现这一点：

Sass 中的示例（使用 SCSS 语法）：

.block {
  display: block
}
.green {
  background: green
}

.green-block {
  @extend .block; // in LESS, the syntax would be the same but without @extend
  @extend .green; // in LESS, the syntax would be the same but without @extend
}

我只会使用这些 CSS 类，但用新的 CSS 类覆盖您需要覆盖的所有样式。

如果您需要从 CSS 类继承所有样式，只需使用相同的 CSS 类两次，如有必要，创建一个新类来覆盖您不需要的样式。