Zielt CSS :not() selektiv auf entfernte Nachkommenelemente ab?-CSS-Tutorial-php.cn

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

Linda Hamilton

Freigeben： 2024-12-06 18:58:16

Original

294 Leute haben es durchsucht

Does CSS :not() Selectively Target Distant Descendant Elements?

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;
}
Nach dem Login kopieren
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;
}
Nach dem Login kopieren
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!
Quelle：php.cn

Vorheriger Artikel：Wie kann ich die Größe von Bildern nur mit CSS anpassen? Nächster Artikel：Wie zeige ich die vertikale Bildlaufleiste in WebKit-Browsern immer an?

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

0

3

2154

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

0

11

2305

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

0

1

1943

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

Aus 2024-04-18 23:52:34

0

1

1817

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1869

verwandte Themen
Mehr>

Was bedeutet es, alle Cookies zu blockieren?

So stellen Sie Videos wieder her, die offiziell aus Douyin entfernt wurden

504 Gateway-Zeitüberschreitung

Der aktuelle Preis der Fil-Währung

Kann Microsoft Visual C++ deinstalliert werden?

Welche Software zum Online-Testen der Computerleistung gibt es?

So legen Sie Seitenzahlen in Word fest

Was ist Lawine?