Wie kaskadieren benutzerdefinierte CSS-Eigenschaften?

Sagen wir, ich CSS haben folgende:Wie kaskadieren benutzerdefinierte CSS-Eigenschaften?

: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 ist, Ist die CSS oben übersetzen:

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

oder gibt es eine zusätzliche

* { 
    color: red; 
}

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

Eine weitere Frage, die ich habe, ist, wenn :root in body in CSS übersetzt.

ist hier ein CodePen Demo: http://codepen.io/anon/pen/RrvLJQ

Quelle

2016-02-13 SanJeet Singh

Wie Sie in Ihrem Titel richtig angegeben haben, benutzerdefinierte Eigenschaften Kaskade. Aus diesem Grund heißt das Modul CSS-benutzerdefinierte Eigenschaften für kaskadierende Variablen. Das bedeutet, dass Ihre benutzerdefinierte Eigenschaft --color wie jedes Element bewertet wird, so wie jede andere CSS-Eigenschaft.In Bezug auf die tatsächlichen Stile, die auf Ihre Elemente angewendet werden, was nur Sie wirklich haben, ist:

* { 
    color: var(--color); 
}

Der var(--color) Wert wird dann für jedes Element ausgewertet basierend darauf, wie die --color Eigenschaft Kaskaden. Also folgt das:

Das body Element hat einen blauen Vordergrund.
Beliebige div Elemente haben einen grünen Vordergrund.
Das Element mit der ID "alert" hat einen roten Vordergrund.
Da Sie keine --color Definition für * haben, ist es standardmäßig inherited. Daher erben alle anderen Elemente --color von ihrem übergeordneten Element: body > p erbt von body, wird blau, und #alert > p erbt von #alert, wird rot.

Wenn Sie wirklich die kaskadierten Werte in Bezug auf die CSS ausdrücken wollen, könnte man sagen, dass es das übersetzt folgende:

:root { 
    color: blue; 
} 
div { 
    color: green; 
} 
#alert { 
    color: red; 
} 
* { 
    color: inherit; 
}

Aber nur, weil die ursprüngliche CSS eine explizite * { color: var(--color); } enthält Definition, die sicherstellt, dass jedes Element color auf abbildet.

Beachten Sie auch, dass der Code, den Sie stammt aus an example within the spec haben, die sich wie folgt beschrieben:

Wenn eine benutzerdefinierte Eigenschaft mehrfach deklariert wird, helfen die Standard-Kaskade Regeln es zu lösen. Variablen immer aus dem berechneten Wert der benutzerdefinierten Eigenschaft auf demselben Element zugeordnet zeichnen

Eine weitere Frage, die ich ist, wenn :root zu body in CSS übersetzt.

:root übersetzt nicht in CSS auf ein beliebiges Element, weil CSS-Dokument sprachunabhängig ist.
:root übersetzt nicht in body in HTML; es entspricht html.

Quelle

2016-02-13 03:21:23 BoltClock

Beginnen wir mit dieser beginnen:

Eine weitere Frage, die ich habe, ist, wenn :root zu body in CSS übersetzt.

Antwort:

Der :root Selektor ermöglicht es Ihnen, die höchste Ebene "Eltern" Element im DOM oder Dokumentenbaum zu zielen. Es ist in der CSS Selectors Level 3-Spezifikation als "strukturelle Pseudo-Klasse" definiert, was bedeutet, dass es verwendet, um Inhalt basierend auf seiner Beziehung mit übergeordneten und Geschwister-Inhalt zu stylen. In der überwältigenden Mehrheit der Fälle sind Sie wahrscheinlich zu treffen, bezieht sich :root auf das <html> Element in einer Webseite.

Source

Dann ist dieser css Vars:

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

wird übersetzen (je nach DOM - wie oben erwähnt), in etwa wie folgt:

html /* this is :root*/ { 
 
    color: blue; 
 
} 
 
div { 
 
    color: green; 
 
} 
 
#alert { 
 
    color: red; 
 
} 
 
* { 
 
    color: inherit; /*this will inherit blue due to HTML is set to blue */ 
 
}

<h1>blue</h1> 
 
<div>green</div> 
 
<span id="alert">red</span> 
 
<span>blue</span>

Quelle

2016-02-13 03:11:11 dippas

Bitte denken Sie daran, auf Ihre Quellen zu verlinken. – BoltClock

ja @BoltClock Ich bearbeite noch meine Antwort in Bezug auf das. – dippas

Sie sollten nicht warten, bevor Sie dies tun. Leute können schnell auf Antworten * sehr * antworten, sobald sie veröffentlicht sind. Ihr Beitrag könnte zum Löschen vorgemerkt werden, bevor Sie Ihre Antwort bearbeiten konnten. – BoltClock

Wie kaskadieren benutzerdefinierte CSS-Eigenschaften?

Antwort

Verwandte Themen