Sagen wir, ich habe folgendes CSS:

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

und mein Markup ist:

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

Meine Frage lautet: Wird das obige CSS folgendermaßen übersetzt:

body {
  color: blue;
}
div {
  color: green;
}
#alert{
  color: red;
}

oder gibt es ein zusätzliches

* {
  color: red;
}

Ohne Variablen wendet der universelle Selektor auf alle Elemente dasselbe CSS an. Ändert sich dies und das Styling wird von Elementen abhängig?

Eine weitere Frage, die ich habe, ist, ob:root wird übersetzt inbody in CSS.

Hier ist eine CodePen-Demo:http: //codepen.io/anon/pen/RrvLJ