为什么 body CSS 变量不覆盖根中定义的变量？ [复制]答案

【问题标题】：Why don't body CSS variables override the ones defined in the root? [duplicate]为什么 body CSS 变量不覆盖根中定义的变量？ [复制]
【发布时间】：2020-09-10 17:22:18
【问题描述】：

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

: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 {...} 选择器中覆盖它。

【问题讨论】：

标签： css css-variables

【解决方案1】：

这是发生了什么：

--brand-color 设置为 blueviolet
--button-background-color 设置为 --brand-color 的当前值（不是对变量的引用）
--brand-color 值设置为 blue

由于--button-background-color 永远不会重置，它会保持原始值。

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

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

【讨论】：