访问 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++ 中的 ::（作用域解析运算符）一样访问全局变量？？

Answer 1

CSS自定义变量是可继承的，也就是说当你在:root中定义一个变量时，它适用于所有元素。

当您将它应用到 div 时，所有 div 和 div 中的所有内容都会发生变化。

并且因为它们已经被继承，它们父s/root的值不能被访问。

查看此 pen 进行一些试验。

一个方法 hack 是复制变量并使用它。

: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

很确定那不是你想做的。

Answer 2

有这个可能

:root { 
  --color: blue; 
}

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

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

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

<div style="--color:green">and me?</div>

<div id="alert" style="--color:red">  
  What's my color too?  
  <p>color?</p>
</div>

或者：

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

Answer 3

你不能用 CSS 做到这一点。

如果您重复声明同一个变量，它将使用本地声明的变量。

看到这个-

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
  While I got red set directly on me!
  <p>I’m red too, because of inheritance!</p>
</div>

来源：Example 5 CSSWG

访问 css 中的全局变量

Accessing global variable in css

css

scope

web-frontend

css-variables