奇怪的 CSS 变量作用域

问题描述 投票:0回答:0

我的项目中有以下代码:

: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>

那么本地范围界定的解决方法是什么?

css css-variables
© www.soinside.com 2019 - 2024. All rights reserved.