覆盖 css 变量

问题描述

我有一个声明并使用 css 变量“--test: red”的组件

但是我想在这个组件之外用新的颜色重新声明这个变量。

https://stackblitz.com/edit/js-va9k9q?file=style.css

这个规则对吗？

:root *{
  --test: green;
}

为什么需要*？如果我删除它，它就不起作用

:root *{
  --test: green;
}
#app {
  --test: red;
}
#app h1{
  background-color: var(--test);
}

HTML

<html>
<body>
    <div id="app"><h1>Example</h1></div>
</body>
</html>

最终结果必须有绿色背景色

解决方法

如果您只想考虑 :root

，请使用第二个变量

:root {
  --new: green;
}

#app {
  --test: red;
}

#app h1 {
  background-color: var(--new,var(--test)); /* will fallback to "test" if "new" is not defined */
}

<div id="app">
  <h1>Example</h1>
</div>

或者您继续使用您显示的正确代码，因为您将针对所有元素（使用 *）来设置将被使用的变量 --test，而不是从 {{ 1}}

这是关于 css 选择器的排序和优先级

如果你喜欢这样：

:root {
  --test: red;
}

.
.
.

:root {
  --test: green;
}

第二个选择器有更多的优先权

但如果你这样做：

:root #app{
  --test: green;
}

.
.
.

:root {
  --test: red;
}

第一个选择器将应用于#app。如果在#app 之外定义了另一个块，它会变成红色。

:root * {} 之所以有效，是因为它具有更高的优先级。

在this link中阅读有关优先级的更多信息

css-variables

覆盖 css 变量

问题描述

解决方法

相关问答