Как каскадные пользовательские свойства CSS?
Допустим, у меня есть следующий 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>
Мой вопрос переводит ли CSS выше:
body {
color: blue;
}
div {
color: green;
}
#alert{
color: red;
}
или есть дополнительный
* {
color: red;
}
Без переменных универсальный селектор применяет один и тот же CSS для всех элементов. Меняется ли это, и стиль становится зависимым от элементов?
Еще один вопрос у меня есть, если:root
переводит наbody
в CSS.
Вот демонстрация CodePen:http://codepen.io/anon/pen/RrvLJQ