如何交换两个CSS变量的值？

Question

假设我有两个CSS变量，control-color和control-color-inverse。我要制作一个<div>，将所有颜色都反转。但这似乎无法正常工作：

* {
  background-color: var(--control-color);
  color: var(--control-color-inverse);
}

:root {
  --control-color: gainsboro;
  --control-color-inverse: black;
}

#child {
  --control-color: var(--control-color-inverse);
  --control-color-inverse: var(--control-color);
}

<div id="parent">
  <p>not themed</p>
  <div id="child">
    <div id="grandchild">
      <p>themed</p>
    </div>
  </div>
</div>

例如，在此摘录中，div#child应该具有带有灰色文本的黑色背景。但似乎我最终得到一个循环引用，并且它被取消了。我该如何完成我想做的事情？

Answer 1

我想你可以做到

#child {
  background-color: var(--control-color-inverse);
  color: var(--control-color);
}

或者您可以使用其他变量名

#child {
  --child-control-color: var(--control-color-inverse);
  --child-control-color-inverse: var(--control-color);
}