Zielt CSS „:not()' selektiv nur auf unmittelbare Kinder oder entfernte Nachkommen ab?-CSS-Tutorial-php.cn

Zielt CSS „:not()' selektiv nur auf unmittelbare Kinder oder entfernte Nachkommen ab?

Mary-Kate Olsen

Freigeben： 2024-12-01 19:44:15

Original

471 Leute haben es durchsucht

Does CSS `:not()` Selectively Target Only Immediate Children or Distant Descendants?

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;
}

Nach dem Login kopieren

Dieser Selektor zielt auf direkte untergeordnete Elemente von

ab. die nicht

sind. Elemente, die weiter entfernte Nachkommen sind, auch wenn sie in einem

innerhalb von

verschachtelt, wird nicht beeinflusst.

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 wenn
selbst 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;
}
Nach dem Login kopieren
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!

Quelle：php.cn

Vorheriger Artikel：Warum funktioniert meine CSS3-Animation in Safari nicht? Nächster Artikel：Wie kann ich automatisch Abstände zwischen Bootstrap-Spalten hinzufügen?

Erklärung dieser Website

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2060

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2215

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1870

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...