Доступ к глобальной переменной в 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>

Как я могу получить доступ к глобальному значению --color в div с помощью id = 'alert'?Или, другими словами, есть ли способ в CSS для доступа к глобальной переменной, как :: (оператор разрешения области видимости) в c ++ ??

Answer 1

Это возможность

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

Вы не можете сделать это с помощью 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>

Источник: Пример 5 CSSWG

Answer 3

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

Уверен, что это не то, что вы хотели бы сделать.