Accessing global variable in css

问题

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

In the above code, how can I access the global value of --color in div with id='alert'? Or in other words is there any way in CSS to access the global variable like the :: (scope resolution operator) in c++??

回答1:

You Can't do that with CSS.

If You'll repeat the declaration of the same variable, it'll use the locally declared variable.

See this-

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

Source: Example 5 CSSWG

回答2:

This is a possibility

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

Or:

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

回答3:

CSS Custom variables are inheritable, that means when you define a variable in :root, it is applicable to all elements.

When you applied it to div it changed for all div and everything inside the div.

And because they have been inherited, their parent's/root's value can't be accessed.

Check out this pen for some trials.

---

One method hack to do is to make a copy of the variable and use it.

: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

Pretty sure that's not you would like to do.

来源：https://stackoverflow.com/questions/52909985/accessing-global-variable-in-css