Zielt CSS „:not()' selektiv nur auf unmittelbare Kinder und Enkelkinder?-CSS-Tutorial-php.cn

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

Susan Sarandon

Freigeben： 2024-12-14 18:57:23

Original

342 Leute haben es durchsucht

Does CSS `:not()` Selectively Target Only Immediate Children and Grandchildren?

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Quelle：php.cn

Vorheriger Artikel：Wie kann ich CSS-Farbtöne nur mithilfe von CSS-Variablen generieren? Nächster Artikel：Wie kann ich aktuelle Seitenlinks mit CSS und jQuery unterschiedlich formatieren?

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

2190

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

2340

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

1963

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