Zielt CSS :not() selektiv auf entfernte Nachkommenelemente ab?

Kann der CSS :not()-Selektor auf entfernte Nachkommen abzielen?

Die CSS3 :not()-Pseudoklasse ist zum Ausschließen von Elementen gedacht die einem angegebenen Selektor entsprechen. Die Unterstützung für die Ausrichtung auf entfernte Nachkommen ist begrenzt.

Implementierung und Unterstützung

Der :not()-Selektor ist in modernen Browsern teilweise implementiert, unterstützt aber die Ausrichtung auf entfernte Nachkommen ist begrenzt. Es arbeitet hauptsächlich mit direkten untergeordneten Elementen eines Elements.

Verhalten mit entfernten Nachkommen

In Ihrem Beispiel hat der Selektor :not(p) keinen Einfluss auf

, auch wenn es ein Nachkomme des

ist. Dies liegt daran, dass :not() nur den unmittelbar untergeordneten Selektor negiert. Das

Das Element entspricht den :not(p)-Kriterien und seine Farbe ist auf Rot gesetzt. Anschließend wird das

Das Element erbt diese Farbe von seinem übergeordneten

.

Erwartetes Verhalten vs. tatsächliches Verhalten

Sie haben erwartet, dass das

Das Element bleibt vom :not()-Selektor unberührt, hat jedoch die Farbänderung geerbt. Dies ist nicht das beabsichtigte Verhalten, um entfernte Nachkommen anzusprechen.

Lösung

Um nur

Elemente innerhalb eines

sollten Sie einen direkteren Selektor verwenden:

div p {
    color: black;
}

Verbesserungen in CSS-Selektoren Level 4

CSS-Selektoren Level 4 schlägt eine Erweiterung vor: not(), um komplexe Selektoren mit Kombinatoren zu akzeptieren. Dies würde es Ihnen ermöglichen, entferntere Nachkommen flexibler anzusprechen. Nach der Implementierung könnten Sie Selektoren schreiben wie:

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

Dieser Selektor zielt auf alle

Elemente, die keine direkten Nachkommen eines

sind.

Das obige ist der detaillierte Inhalt vonZielt CSS :not() selektiv auf entfernte Nachkommenelemente ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!