可以在选择器中覆盖引用的 CSS 变量吗？ [复制]

Question

我试图在这里覆盖至少不适用于 Chrome 的颜色值。想知道这是一个错误还是仅仅是 CSS 变量的限制。

我正在覆盖的 --contrast-color 没有生效 (#fff)。但是，显然，如果我在 .dark 中将其再次定义为 --title-color: var(--contrast-color);

，通常覆盖 --title-color 效果很好

:root {
  --contrast-color: red;
  --title-color: var(--contrast-color);
}


.dark {
  --contrast-color: #fff;
  background: #000;
}

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

<div>
  <h1 class="title">
    Heading (should be red)
  </h1>
</div>

<div class="dark">
  <h1 class="title">
    Heading (should be #fff)
  </h1>
</div>

Answer 1

当您在.dark 元素上更新--contrast-color 时，变量--title-color: var(--contrast-color); 是为:root 元素定义的。

如果您希望自动更新该引用，而无需重新声明 --title-color，则应为同一元素声明两个变量 --contrast-color（例如，在 div 上，如下例所示，但我建议将 theme 类应用到一个通用容器上，比如:root)

对变量的更新最终会重新评估其后代的引用，而不是祖先的引用：事实上，如果变量的更新也影响了覆盖 same 属性的祖先，那么它会立即改变，级联，另一个标题。

因此，两个标题都是白色的。

div {
  --contrast-color: red;
  --title-color: var(--contrast-color);
}


div.dark {
  --contrast-color: #fff;
  background: #000;
}

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

  
<div>
  <h1 class="title">
    Heading (should be red)
  </h1>
</div>

<div class="dark">
  <h1 class="title">
    Heading (should be #fff)
  </h1>
</div>