时间戳

首页 > 解决方案 > 继承（颜色）值的 CSS 自定义属性更改不起作用

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

问题描述

我在下面有这个例子，它是从它的父.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>

标签： csscss-variables

解决方案

该属性已正确重新定义，但除非您不设置该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>

推荐阅读