为什么CSS自定义属性的Cascade不起作用？ [重复]

Question

这个问题在这里已有答案：

• CSS scoped custom property ignored when used to calc var in outer scope 1回答

我有一个完整的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>