Heim >Web-Frontend >CSS-Tutorial >Zielt CSS „:not()' selektiv nur auf unmittelbare Kinder oder entfernte Nachkommen ab?
Zielt CSS „:not()' selektiv nur auf unmittelbare Kinder oder entfernte Nachkommen ab?
- Mary-Kate OlsenOriginal
- 2024-12-01 19:44:15472Durchsuche
Erweitert sich der CSS-Selektor :not() auf entfernte Nachkommen?
Die CSS3-Pseudoklasse :not() ermöglicht die Negation in Selektoren und schließt Elemente aus, die mit a übereinstimmen angegebenen Muster. Es gibt jedoch Einschränkungen hinsichtlich der Funktionalität.
Aktuelle Implementierung
Wie in der Dokumentation zu CSS3 und CSS Selectors Level 4 beschrieben, stimmt :not() derzeit nur mit direkten Nachkommen überein . Im bereitgestellten Beispiel:
div :not(p) {
color: red;
}
Dieser Selektor zielt auf direkte untergeordnete Elemente von
sind. Elemente, die weiter entfernte Nachkommen sind, auch wenn sie in einem
innerhalb von
Vererbung und Stil
Die Vererbung von Stileigenschaften kann das Verhalten von :not() weiter erschweren. Im Beispiel aus der Frage ist das
Element innerhalb des
erbt die rote Textfarbe von seinem übergeordneten Text, auch wennselbst entspricht dem :not()-Selektor. Dies liegt daran, dass die Negation auf das übergeordnete Element
angewendet wird, das die angegebenen Kriterien erfüllt.Zukünftige Verbesserungen
CSS Selectors Level 4 schlägt eine Erweiterung vor: not() um vollständige komplexe Selektoren und Kombinatoren einzuschließen. Dies würde eine detailliertere Filterung ermöglichen und Selektoren wie:
p:not(div p) { color: red; }Empfehlungen
Aufgrund der aktuellen Einschränkungen von :not() und möglicher Verwechslungen mit der Vererbung ermöglichen , wird generell davon abgeraten, es zum Filtern entfernter Nachkommen zu verwenden. Erwägen Sie alternative Ansätze wie die Verwendung direkter Selektoren oder die Anwendung eines bestimmten Stils auf Elemente, die Sie ausschließen möchten. Sobald die Unterstützung für komplexe Selektoren in :not() implementiert ist, kann diese Funktionalität nützlicher werden.
Das obige ist der detaillierte Inhalt vonZielt CSS „:not()' selektiv nur auf unmittelbare Kinder oder entfernte Nachkommen ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!