CSS自定义属性对继承（颜色）值的更改不起作用

Question

下面有一个示例，其中.bar从其父项继承color: var(--color);。

如果我随后将--color重新定义为.bar中的另一种颜色，则自定义属性不会更新。

有人可以解释为什么吗，以及在继承该自定义属性的子代中更改--color的值需要做什么？

:root {
  --color: red;
  --color2: blue;
}

.foo {
  color: var(--color);
}

.bar {
  --color: var(--color2);
}

<div class="foo">
  foo
  <div class="bar">
    bar
  </div>
</div>

Answer 1

该属性已正确重新定义，但是在未设置color属性之前，元素.bar会从其父级继承颜色，并且在父级范围内该颜色为红色。

:root {
  --color: red;
  --color2: blue;
}

.foo {
  color: var(--color);
}

.bar {
  --color: var(--color2);
  color: var(--color);
}

<div class="foo">
  foo
  <div class="bar">
    bar
  </div>
</div>