今天，我发现了嵌套元素使用inherit关键字时转换的有趣行为。如果没有inherit，则立即触发所有嵌套元素上的转换。而继承时则是级联触发转换。（如评论中所述，该行为仅针对 chrome ）
没有继承

const change = document.getElementById("change");
let toggler = true;
change.addEventListener("click", () => {
    toggler = !toggler;
    document.documentElement.style
    .setProperty('--color', toggler ? "black" : "red");
})

::root{
  --color: "black";
}

* {
  transition: color 1s;
  color: var(--color);
}

.test {
  color: inherit;
}

<div>
  Text level1
  <div>
    Text level2
    <div>
      Text level3
    </div>
  </div>
  <button id="change">
    ChangeColor
  </button>
</div>

关于Inherit

const change = document.getElementById("change");
let toggler = true;
change.addEventListener("click", () => {
toggler = !toggler;
    document.documentElement.style
    .setProperty('--color', toggler ? "black" : "red");
    
})

::root{
  --color: "black";
}

* {
  transition: color 1s;
  color: var(--color);
}

.test {
  color: inherit;
}

<div class="test">
  Text level1
  <div class="test">
    Text level2
    <div class="test">
      Text level3
    </div>
  </div>
  <button id="change">
    ChangeColor
  </button>
</div>

有没有办法在使用inherit时立即更改颜色？