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

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 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!