为什么 CSS 自定义属性的级联不起作用？

Question

我有一个功能齐全的 CodePen here 来显示问题。我正在使用 CSS 自定义属性，如下所示：

:root {
  --global-primary-colour-hue: 211;
  --global-primary-colour-saturation: 100%;
  --global-primary-colour-lightness: 50%;
  --global-primary-colour-opacity: 1;
  --global-primary-colour: hsla(
    var(--global-primary-colour-hue),
    var(--global-primary-colour-saturation),
    var(--global-primary-colour-lightness),
    var(--global-primary-colour-opacity));
}

.box {
  background-color: var(--global-primary-colour);
  height: 100px;
  width: 100px;
}

然后我设置了一个范围滑块和框来显示我 HTML:

中的颜色

<input id="hue-range" value="0" type="range" min="0" max="360">

<div class="box"></div>

最后我想使用范围滑块来驱动 --global-primary-colour-hue 属性。我可以让它像这样工作：

var element = document.getElementById("hue-range");
element.onchange = function(){
  document.body.style.setProperty(
    "--global-primary-colour-hue", 
    this.value.toString());

  // Why does the box stop changing colour when I comment out this line?
  document.body.style.setProperty(
    "--global-primary-colour",
    "hsla(var(--global-primary-colour-hue),var(--global-primary-colour-saturation),var(--global-primary-colour-lightness),var(--global-primary-colour-opacity))");
}

我的问题是，为什么我要设置--global-primary-colour属性？当我取消最后一行的注释时，框中的颜色不再改变。

Answer 1

在您的脚本中，您将在 body 元素上设置自定义属性。但是，在您的样式表中，您的自定义属性都是（像往常一样）为 :root、html 元素指定的。所以--global-primary-colour-hue的值对于:root不变，--global-primary-colour的值反过来也保持不变。这个不变的值然后被 body 和 .box 继承——--global-primary-colour-hue 的新值最终永远不会被使用。

在您的脚本中为 document.documentElement 设置属性，或者将 CSS 规则更改为目标 body，这样您的代码就可以正常工作而无需最后一个行：

var element = document.getElementById("hue-range");
element.onchange = function(){
  document.documentElement.style.setProperty(
    "--global-primary-colour-hue", 
    this.value);
}

:root {
  --global-primary-colour-hue: 211;
  --global-primary-colour-saturation: 100%;
  --global-primary-colour-lightness: 50%;
  --global-primary-colour-opacity: 1;
  --global-primary-colour: hsla(
    var(--global-primary-colour-hue),
    var(--global-primary-colour-saturation),
    var(--global-primary-colour-lightness),
    var(--global-primary-colour-opacity));
}

.box {
  background-color: var(--global-primary-colour);
  height: 100px;
  width: 100px;
}

<input id="hue-range" value="0" type="range" min="0" max="360">

<div class="box"></div>

为什么 CSS 自定义属性的级联不起作用？

Why does the Cascade for CSS Custom Properties Not Work?

javascript

css

theming

css-variables