Implementierung der CSS-Auswahl von untergeordneten Elementen für übergeordnete Elemente

Normalerweise wählt ein CSS-Selektor von oben nach unten aus und wählt untergeordnete Elemente durch übergeordnete Elemente aus. Ist es also möglich, übergeordnete Elemente durch untergeordnete Elemente auszuwählen?

<ul>
    <li>
        <a href="#" class="aktiv">1</a>
    </li>
    <li>
        <a href="#">2</a>
    </li>
</ul>

Wie kann ich das LI auswählen, das a.active enthält? Das CSS, das wir bisher gelernt haben, scheint keine Lösung zu haben, aber heute werden wir eine CSS-Pseudoklasse vorstellen: has(), die diese Funktion hat. Obwohl sie sich noch im Entwurfsstadium befindet, können Sie sie dennoch im Voraus kennenlernen.

li:hat(> a.aktiv){
    Farbe: rot;
}

Zusätzlich zur Anzeige der Inklusion kann :has auch eine Geschwisterfolgebeziehung anzeigen.

div:hat(+ p){
    Farbe: rot;
}

Zeigt die Auswahl des <div>-Tags an, vorausgesetzt, dass auf das Div-Tag ein <p> folgen muss. Kann auch mit :not verwendet werden

Artikel:nicht(:hat(ein)){
    Farbe: rot;
}

Stellt ein <article>-Tag dar, das kein <a> enthält. Beachten Sie hier die Reihenfolge von :not und :has. Unterschiedliche Reihenfolgen stellen unterschiedliche Bedeutungen dar.

Artikel:hat(:nicht(ein)){
    Farbe: rot;
}

Zeigt an, dass es Nicht-<a> <article>-Tags enthält

Tatsächlich ist das :focus-within, über das wir zuvor gesprochen haben, auch eine Pseudoklasse, die das übergeordnete Element über das untergeordnete Element auswählt, die Bedingung kann jedoch nur sein, ob das untergeordnete Element den Fokus erhält, während :has flexibler und leistungsfähiger ist.

Form: Fokus innerhalb {
    Hintergrundfarbe: schwarz;
}

Wenn es durch :has implementiert wird, kann es wie folgt geschrieben werden

Form:hat(:Fokus){
    Hintergrundfarbe: schwarz;
}

Dies ist das Ende dieses Artikels über die Implementierung der CSS-Unterelementauswahl von übergeordneten Elementen. Weitere relevante CSS-Unterelementauswahl von übergeordneten Elementen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!