我的项目中有以下代码:
:root,
[data-theme=light] {
--main-color: red;
--action-color: var(--main-color);
}
[data-theme=dark] {
--main-color: blue;
}
.action-box {
padding: 10px;
background-color: var(--action-color);
}
<div class="content" data-theme="dark">
<div class="action-box"></div>
</div>
.action-box
是红色的,即使我在父容器上有data-theme="dark"
。为什么颜色不是蓝色的?我在我的 CSS 中显然覆盖了它 - --action-color
引用 --main-color
和 --main-color
设置为 blue
。当我将 data-theme="dark"
应用到我的 <html>
元素时,框实际上变成了蓝色,那么这里的作用域究竟是如何工作的呢?例如,在下面的代码中,框变为蓝色:
:root,
[data-theme=light] {
--main-color: red;
--action-color: var(--main-color);
}
[data-theme=dark] {
--main-color: blue;
}
.action-box {
padding: 10px;
background-color: var(--action-color);
}
<html data-theme="dark">
<body>
<div class="content">
<div class="action-box"></div>
</div>
</body>
</html>
那么本地范围界定的解决方法是什么?