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

Question

我在下面有这个例子，其中 .bar 从 parent 继承了 color: var(--color);。

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

谁能解释为什么，以及需要什么才能更改 children 中 --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>

CSS custom property change on inherited (color) value doesn't work