css - 在css中访问全局变量

Question

:root { 
  --color: blue; 
}

div { 
  --color: green;
    color: var(--color) 

}

#alert { 
  --color: red; 
    color: var(--color) 
}

<p>What's my color?</p>

<div>and me?</div>

<div id='alert'>  
  What's my color too?  
  <p>color?</p>
</div>

在上面的代码中，如何在 id='alert' 的 div 中访问 --color 的全局值？或者换句话说，CSS中是否有任何方法可以访问全局变量，如c++中的 :: （范围解析运算符）？

标签： cssscopeweb-frontendcss-variables

Answer 1

CSS 自定义变量是可继承的，这意味着当您在 中定义变量时:root，它适用于所有元素。

当你将它应用到div它时，所有 div 和div.

并且因为它们是被继承的，所以它们的父/根的值不能被访问。

看看这支笔进行一些试验。

---

一种破解方法是制作变量的副本并使用它。

:root {
  --color: blue;
  --colorRoot: var(--color);
  color: var(--color);
}

div {
  --color: green;
  color: var(--color);
}

#inside {
  color: var(--colorRoot);
}

<div> I am inside a div.<br><span id="inside">I am inside</span></div>

I am ouuuuuutside

很确定这不是你想做的。