Heim >Web-Frontend >CSS-Tutorial >Zielt CSS „:not()' selektiv nur auf unmittelbare Kinder und Enkelkinder?
Zielt CSS „:not()' selektiv nur auf unmittelbare Kinder und Enkelkinder?
- Susan SarandonOriginal
- 2024-12-14 18:57:23343Durchsuche
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
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 vonist, während das ElementDas 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!
Stellungnahme：Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn