用全局变量覆盖局部 css 变量

Question

是否可以用全局变量覆盖局部 CSS 变量？ 正如我们所知，反之亦然。如果有像!important 这样的东西来覆盖局部变量，有人可以帮忙吗？

以下面的示例为例，希望red 的优先级高于blue。

 :root{
    --primarycolor: red !important; /*Like this*/
  }
  body {
    color: var(--primarycolor);
    border:2px solid var(--primarycolor);
    padding:5px;
  }
  div{
    --primarycolor: blue; /*Want to override this*/
    color: var(--primarycolor);
    border:2px solid var(--primarycolor);
    padding:5px;
  }

Check all border color - I am in body
<div>I am in div</div>

Answer 1

使用* 代替:root。它不会是一个全局变量，但仍被声明为一个全局，它将应用于所有元素（而不是被所有元素继承）

* {
  --primarycolor: red !important; /*Like this*/
}

body {
  color: var(--primarycolor);
  border: 2px solid var(--primarycolor);
  padding: 5px;
}

div {
  --primarycolor: blue; /*Want to override this*/
  color: var(--primarycolor);
  border: 2px solid var(--primarycolor);
  padding: 5px;
}

Check all border color - I am in body
<div>I am in div</div>

并且没有重要的地方将适用，因为它更具体：

* {
  --primarycolor: red;
}

body {
  color: var(--primarycolor);
  border: 2px solid var(--primarycolor);
  padding: 5px;
}

div {
  --primarycolor: blue; 
  color: var(--primarycolor);
  border: 2px solid var(--primarycolor);
  padding: 5px;
}

Check all border color - I am in body
<div>I am in div</div>