如何使 css class 从另一个 class 继承所有值而不更改原始 class
How do you make a css class inherit all values from another class without changing the original class
我正在尝试通过浏览器源将网站导入 OBS Studio。不幸的是,我正在导入的网站通过给网站的 html 元素设置为浅色主题 class tw-root--theme-light
.
这可以通过将 class 更改为 tw-root--theme-dark
来轻松更改,但 OBS Studio 不允许您编辑 html。 我只能追加CSS.
是否可以覆盖 class tw-root--theme-light
以继承 tw-root--theme-dark
的所有值?
无法 以纯 CSS.
从另一个 class 继承所有值
CSS 继承是从父元素到子元素,这不适用于 CSS classes.
等规则集
我们可以使用 CSS 预处理器(例如 Sass 和 LESS)通过扩展 classes:
来实现这一点
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 classes 但用新的 CSS classes 覆盖您需要覆盖的所有样式。
如果您需要继承 CSS class 的所有样式,只需使用相同的 CSS class 两次,如有必要,创建一个新的 class 覆盖不需要的样式。
我正在尝试通过浏览器源将网站导入 OBS Studio。不幸的是,我正在导入的网站通过给网站的 html 元素设置为浅色主题 class tw-root--theme-light
.
这可以通过将 class 更改为 tw-root--theme-dark
来轻松更改,但 OBS Studio 不允许您编辑 html。 我只能追加CSS.
是否可以覆盖 class tw-root--theme-light
以继承 tw-root--theme-dark
的所有值?
无法 以纯 CSS.
从另一个 class 继承所有值CSS 继承是从父元素到子元素,这不适用于 CSS classes.
等规则集我们可以使用 CSS 预处理器(例如 Sass 和 LESS)通过扩展 classes:
来实现这一点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 classes 但用新的 CSS classes 覆盖您需要覆盖的所有样式。
如果您需要继承 CSS class 的所有样式,只需使用相同的 CSS class 两次,如有必要,创建一个新的 class 覆盖不需要的样式。