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

问题描述

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

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

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

解决方法

没有办法从纯 CSS 中的另一个类继承所有值。

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

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

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 类两次，如有必要，创建一个新类来覆盖您不需要的样式。