Wie kaskadieren benutzerdefinierte CSS-Eigenschaften?
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