CSS-KindElementSelektoren
- Vorherige Seite CSS-NachfolgerSelektoren
- Nächste Seite CSS-NachbarkindSelektoren
Im Gegensatz zum Nachfolger-Selektor können die Unter-element-Selektoren (Child selectors) nur Elemente auswählen, die als Unter-element eines bestimmten Elements sind.
Wählen Sie den Unter-element
Wenn Sie nicht alle abgeleiteten Elemente auswählen möchten, sondern den Umfang einschränken und nur die Unter-elemente eines bestimmten Elements auswählen möchten, verwenden Sie den Unter-element-Selektor (Child selector).
Zum Beispiel, wenn Sie nur die <strong>strong</strong>-Elemente als Unter-elemente der <h1>-Elemente auswählen möchten, können Sie so schreiben:
h1 > strong {color:red;}
Diese Regel wird die zwei <strong>strong</strong>-Elemente unter dem ersten <h1>in Rot umwandeln, aber der <strong>strong</strong> im zweiten <h1>ist davon unbeeinflusst:
<h1>Dies ist <strong>sehr</strong> <strong>sehr</strong> wichtig.</h1> <h1>Dies ist <em>really <strong>very</strong></em> wichtig.</h1>
Grammatikexplanation
Sie sollten bereits bemerkt haben, dass der KindSelektor das Großeck (Kindverknüpfung) verwendet.
An den Seiten der Kindverknüpfung können Leerzeichen vorhanden sein, dies ist optional. Daher sind alle folgenden Schreibweisen in Ordnung:
h1 > strong h1> strong h1 >strong h1>strong
Wenn man von rechts nach links liest, kann der Selektor h1 > strong als „Wähle alle strong-Elemente, die als Kind des h1-Elements existieren“ interpretiert werden.
Kombination von NachfolgerSelektoren und KindSelektoren
Sehen Sie sich unten diesen Selektor an:
table.company td > p
Die obige Selektor wählt alle p-Elemente, die als td-Element-Kind existieren, das selbst von dem table-Element erbt, das eine class-Attribut mit company enthält.
- Vorherige Seite CSS-NachfolgerSelektoren
- Nächste Seite CSS-NachbarkindSelektoren
