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内部的所有内容。

由于它们已经被继承，因此无法访问其父/根的值。

查看此pen进行一些试用。

一种方法技巧是复制变量并使用它。

: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中访问全局变量

3 个答案: