Zielt CSS „:not()' selektiv nur auf unmittelbare Kinder und Enkelkinder?

Erweitert sich der :not()-Selektor auf entfernte Nachkommen?

In CSS3 bietet die :not()-Pseudoklasse eine Möglichkeit um bestimmte Elemente aus einem Selektor auszuschließen. Allerdings kann sein Verhalten beim Umgang mit entfernten Nachkommen verwirrend sein.

Aktuelle Implementierung

Laut offizieller Dokumentation und Analyse der Browserunterstützung nur der :not()-Selektor gilt für direkte Kinder oder Enkel des Zielelements.

Bedenken Sie dies Beispiel:

div *:not(p) { color: red; }

Diese Regel formatiert alle direkten Kinder oder Enkel von

die nicht

Elemente.

Der :not()-Selektor erstreckt sich jedoch nicht über Enkelkinder hinaus.

Das Problem

In diesem Beispiel ist der

:

<div>
    <ul>
        <li>This is red</li>
    </ul>
    <p>This is NOT</p>
    <blockquote><p>This is red but is not supposed to be!</p></blockquote>
</div>

In diesem Fall ist das

Das Element erfüllt die Bedingung *:not(p), da es ein Nachkomme von

ist, während das Element

Das darin enthaltene Element erbt die rote Farbe.

Lösung

Das richtige Verhalten gilt für das

Das Element behält seine Standardfarbe bei. Um dies zu erreichen, sollte die Regel auf alle

Elemente direkt:

div p { color: black; }

Zukünftige Verbesserungen in CSS-Selektoren Level 4

Der Vorschlag für CSS-Selektoren Level 4 erweitert den Selektor :not(), um vollständig komplexe Selektoren zu akzeptieren Kombinatoren. Das bedeutet, dass wir Selektoren schreiben können wie:

p:not(div p) { color: red; }

Diese erweiterte Syntax ermöglicht eine präzisere Ausrichtung auf entfernte Nachkommen.

Das obige ist der detaillierte Inhalt vonZielt CSS „:not()' selektiv nur auf unmittelbare Kinder und Enkelkinder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!