如何交换两个 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>

例如，在这个 sn-p 中，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);
}