Warum überschreibt der CSS-Selektor mit > Zeichen (direktes Kind) die Standardstile?
Lesezeit: 3 Minuten
Limon Monte
Könnte mir jemand erklären warum CSS > Zeichen (direktes Kind) überschreibt die Standardfarbe von all <li> Tags in diesem Beispiel:
ul > li {
color:red;
}
<ul>
<li>This should be red
<ol>
<li>default color 1</li>
<li>default color 2</li>
</ol>
</li>
<li>And this should be red also
<ol>
<li>default color 3</li>
<li>default color 4</li>
</ol>
</li>
</ul>
Erwartetes Ergebnis:
Tatsächliche Ergebnis:
Ich weiß, dass ich es beheben kann, indem ich hinzufüge li { color: black; }aber ich frage mich warum ul > li überschreibt die Standardfarbe für <li>?
Michael Benjamin
Das Problem ist nicht der untergeordnete Kombinator (>), es ist das color Eigentum, das vererbbar ist.
Obwohl der Anfangswert der color Eigenschaft variiert von Browser zu Browser, inherit ist üblich. Das bedeutet, dass die Textfarbe eines Elements vom übergeordneten Element geerbt wird. Sie sehen dies in Ihrem Code.
Im Gegensatz dazu die border Eigentum ist nicht vererbbar. Beachten Sie, dass sie im Gegensatz zur Textfarbe nur für Ihr Ziel gilt li:
ul > li {
color: red;
border: 1px solid black;
}
li { border: 1px solid inherit !important; }
<ul>
<li>This should be red
<ol>
<li>default color 1</li>
<li>default color 2</li>
</ol>
</li>
<li>And this should be red also
<ol>
<li>default color 3</li>
<li>default color 4</li>
</ol>
</li>
</ul>
Um Ihr Styling-Ziel zu erreichen, legen Sie eine Standardfarbe für fest li Element. Dies wird überschrieben inherit. Hier ist ein Beispiel:
ul > li {
color: red;
}
li {
color: black;
}
<ul>
<li>This should be red
<ol>
<li>default color 1</li>
<li>default color 2</li>
</ol>
</li>
<li>And this should be red also
<ol>
<li>default color 3</li>
<li>default color 4</li>
</ol>
</li>
</ul>
Was @Ilmari Karonen gesagt hat. Sie möchten das standardmäßige Vererbungsverhalten in Nachkommen von inneren li-Elementen beibehalten.
– BoltClock
25. November 2016 um 14:18 Uhr
Der Standardwert für die color Eigenschaft ist für die meisten Elemente inheritnicht black. Dies bedeutet, dass der übergeordnete Wert (ol) Element hat. (Und das ist nach dem ol erbt vom Rot li).
Sie müssten eine explizite Farbe festlegen, um sie zu überschreiben. Zum Beispiel:
ul > li li {
color: black;
}
oder
ol > li {
color: black;
}
Danke @Quentin, deine Antwort war für mich klarer als die beiden vorherigen, aber ich akzeptiere die am besten dokumentierte und am meisten gewählte, wahrscheinlich wird es für weitere Leser besser sein.
– Limon Monte
24. November 2016 um 19:10 Uhr
So sollte Akzeptieren nicht funktionieren 😉 Akzeptiere die Antwort, die dir am meisten geholfen hat, haha
– Stephan Bijzitter
25. November 2016 um 8:28 Uhr
Stuart
Das ol erbt die Stile. Sie müssen Stile für die innere Liste angeben.
Und warum? ol hat absolut nichts mit ul > li Selektor, oder?
– Limon Monte
24. November 2016 um 19:03 Uhr
Dein ol ist drinnen a li das rot gestylt wurde, also wird es diese Farbe erben.
– Stuart
24. November 2016 um 19:04 Uhr
Ja, jetzt verstehe ich, danke für die zusätzliche Erklärung
– Limon Monte
24. November 2016 um 19:05 Uhr
Lesen Sie sich etwas in CSS-Vererbung und -Spezifität ein, es wird bald Klick machen 🙂
– Stuart
24. November 2016 um 19:06 Uhr
11368800cookie-checkWarum überschreibt der CSS-Selektor mit > Zeichen (direktes Kind) die Standardstile?yes