Warum überschreibt der CSS-Selektor mit > Zeichen (direktes Kind) die Standardstile?

Lesezeit: 3 Minuten

Benutzer-Avatar
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:

Geben Sie hier die Bildbeschreibung ein

Tatsächliche Ergebnis:

Geben Sie hier die Bildbeschreibung ein

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

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

Verweise:

  • 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

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

1136880cookie-checkWarum überschreibt der CSS-Selektor mit > Zeichen (direktes Kind) die Standardstile?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy