为什么正文CSS变量不覆盖根目录中定义的变量？

问题描述

问题本身是不言自明的。我有以下代码：

: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的当前值（不是对变量的引用）
--brand-color的值设置为blue

由于--button-background-color从未重置，因此它保持原始值。

您可以直接使用品牌颜色，它的值正确。

button {
    background-color: var(--brand-color);
    ...
}

css-variables

为什么正文CSS变量不覆盖根目录中定义的变量？

问题描述

解决方法

相关问答