这个问题本身很容易解释。我有以下代码：
:root {
--brand-color: blueviolet;
--button-background-color: var(--brand-color);
}
body {
--brand-color: blue;
}
button {
background-color: var(--button-background-color);
border: none;
color: #fff;
border-radius: 4px;
padding: 4px 10px;
}<html>
<body>
<button>Button</button>
</body>
</html>在body {...}选择器中，我覆盖了--brand-color变量。按钮在主体中，但按钮的背景色仍设置为根中定义的--brand-color。我知道这是CSS变量的默认行为，但有人能向我解释为什么会发生这种情况，以及在这里覆盖变量的正确方法是什么吗？前提是，我不想在button {...}选择器中覆盖它。
下面是发生的事情：
--brand-color设置为blueviolet--button-background-color设置为--brand-color的CURRENT VALUE(不是对变量的引用(--brand-color值设置为blue
由于--button-background-color从不重置，因此它将保持原始值。
你可以直接使用品牌颜色，它会有正确的值。
button {
background-color: var(--brand-color);
...
}