Schließt CSS :not() entfernte Nachkommen selektiv aus?

Abstandsnachkommen und der CSS :not()-Selektor

Die CSS3 :not()-Pseudoklasse ist so konzipiert, dass sie einen bestimmten Selektor negiert übereinstimmen. Es wurde in vielen Browsern implementiert. Ein häufiges Missverständnis im Zusammenhang mit diesem Selektor ist jedoch seine Anwendbarkeit auf entfernte Nachkommen.

Während :not() Übereinstimmungen für direkte untergeordnete Elemente erfolgreich negiert, verhält es sich bei weiter entfernten Nachkommen nicht wie erwartet. Wie im bereitgestellten Beispiel dargestellt:

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

In diesem Snippet ist das

Das Element erbt immer noch die rote Farbe von seinem übergeordneten Element

, auch wenn es kein direkter Nachkomme von

ist. Dies liegt daran, dass :not() nur die Übereinstimmung für dieses Element direkt negiert, nicht seine Nachkommen.

Die Dokumentation für :not() in CSS3 und CSS Selectors Level 4 befasst sich nicht explizit mit diesem Verhalten. Es wurde jedoch bestätigt, dass dieses Verhalten beabsichtigt ist und der Selektor nicht dazu gedacht ist, die Zuordnung von Enkelkindern zu unterstützen.

Lösung

Um das gewünschte Ergebnis zu erzielen Um entfernte Nachkommen aus der :not()-Übereinstimmung auszuschließen, muss eine andere Methode verwendet werden. Ein gängiger Ansatz besteht darin, eine Farbe für das spezifische Element anzugeben, das Sie ausschließen möchten, und alle geerbten Werte zu überschreiben:

div {
  color: red;
}

div p {
  color: black;
}

Nach dem Login kopieren

CSS Selectors Level 4 Enhancement

CSS Selectors Level 4 schlägt eine Erweiterung des :not()-Selektors vor, die die Verwendung komplexerer Selektoren darin ermöglicht. Diese Änderung ermöglicht die korrekte Negation von Nachkommen mit der folgenden Syntax:

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

Nach dem Login kopieren

Obwohl diese Verbesserung in Browsern noch nicht weit verbreitet ist, bietet sie eine vielversprechende Lösung für den Abgleich und die Negation entfernter Nachkommen mithilfe von :not().

Das obige ist der detaillierte Inhalt vonSchließt CSS :not() entfernte Nachkommen selektiv aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!