<分区>
标签 css css-variables
<分区>
假设我有两个 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应该有黑色背景和灰色文本。但似乎我最终得到了一个循环引用并且它被取消了。我怎样才能完成我想做的事情？
最佳答案
我认为你可以做到这一点
#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);
}
关于css - 如何交换两个 CSS 变量的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55603602/