Kind | CSS-Tricks

Sara Cope am 12. Jan. 2016

Ein Kind-Kombinator in CSS ist das „größer als“-Symbol, es sieht so aus

ol > li {
  color: red;
}

Es bedeutet „Nur Elemente auswählen, die direkte Nachfahren sind“. In diesem Fall: „Listenelemente auswählen, die direkte Nachfahren einer geordneten Liste sind“. Zur Veranschaulichung

<ol>
  <li>WILL be selected</li>
  <li>WILL be selected</li>
  <ul>
     <li>Will NOT be selected</li>
     <li>Will NOT be selected</li>
  </ul>
  <li>WILL be selected</li>
</ol>

Versuchen Sie, das > -Symbol zu entfernen, wenn Sie mit der folgenden Demo experimentieren

Siehe den Stift f149edb15c53d157a7009b816ee919d2 von CSS-Tricks (@css-tricks) auf CodePen.

Weitere Informationen

Auch bekannt als…

Der Kind-Kombinator ist, wie die Spezifikation ihn nennt, aber man hört ihn auch

Kind-Selektor
direkter Nachfahrenselektor
direkter Nachfahren-Kombinator

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Alle	Alle	Alle	Alle	7+	Alle	Alle

prakash

# 14. Juli 2015

Warum funktioniert der Kind-Selektor nicht in <table>?

Antworten

Chris Coyier

Permalink zum Kommentar# 12. Januar 2016
Ich habe eine Vermutung!

Wenn Sie HTML schreiben wie
```
<table>
  <tr>
    <td>thing</td>
  </tr>
</table>
```
und Sie einen Selektor wie
```
table > tr > td {
  color: red;
}
```
das wird nicht funktionieren, weil im gerenderten DOM, es wirklich so aussehen wird wie
```
<table>
  <TBODY>
  <tr>
    <td>thing</td>
  </tr>
  </TBODY>
</table>
```
Da <tbody> ein obligatorischer Teil der Tabellen-Markup ist und der Browser ihn einfach dort einfügt, wenn Sie es nicht tun. Diese DOM-Struktur bedeutet, dass die <tr> nicht mehr ein Kind der <table> ist!

vidya Veeramony

# 23. Dezember 2018

was ist dann der Unterschied zwischen dem Selektor ol > li und ol li … sogar ein Leerzeichen wählt alle li in der Liste aus

texxs

Permalink zum Kommentar# 27. Juni 2019

DIESES

Jass

# 1. September 2019

ol > li

ol > li {
    background-color: green;
}

wird resultieren in

<ol>
    <li>Green.</li>
    <li>Green.</li>
    <ul>
        <li>Not Selected.</li>
        <li>Not Selected.</li>
    </ul>
    <li>Green.</li>
</ol>

, während ol li

ol li {
    background-color: green;
}

<ol>
    <li>Green.</li>
    <li>Green.</li>
    <ul>
        <li>Green.</li>
        <li>Green.</li>
    </ul>
    <li>Green.</li>
</ol>

csengh

# 10. November 2019

Sie sagen: „Nur Elemente auswählen, die direkte Nachfahren sind“.
Für mich bedeutet das: Es schaut nur eine Ebene nach unten, nicht tiefer, aber leider funktioniert das für mich nicht

div > p {
            color: red
}

<div>
        this will match

            <div>this will NOT match
                <p>this will match
            </div>

                <p>Oops. this is thre levels deep so WHY Match?
            </p>
            Oops. this is two levels deep so WHY Match?
        </p>
    </div>

Was ist damit falsch, bitte helfen Sie

John

# 8. März 2020

Hallo, ich frage mich, ob mir jemand besser helfen kann, dies zu verstehen. Ich habe den folgenden CSS-Code, der einwandfrei funktioniert, da das HTML tatsächlich als Tabelle angezeigt wird. Offensichtlich sind ein paar Zeilen zur Platzersparnis weggelassen.

div.tableRow > p, div.tableRow > label, div.tableRow > input {
display: table-cell;
vertical-align: top;
padding: 3px;
}

Wenn ich die CSS-Selektoren wie folgt ändere, werden die Stile nicht mehr angewendet

div.tableRow p, div.tableRow label, div.tableRow input {
display: table-cell;
vertical-align: top;
padding: 3px;
}

Bisher verstehe ich, dass wenn Sie einen Selektor ohne ein > Symbol verwenden (z. B. div.tableRow p), alle p-Nachfahren von div.tableRow ausgewählt werden. Warum würde also mein Tabellenanzeigestil verloren gehen, wenn ich das „>“ entferne?
Ich bin sicher, dass es etwas ist, das ich nicht ganz verstehe, daher wird jede Hilfe geschätzt.

Weitere Informationen

Auch bekannt als…

Browser-Unterstützung

Kommentare

Antwort hinterlassen Antwort abbrechen