Warum verhält sich der CSS-Selektor „:not()' in Safari, Chrome und Firefox unterschiedlich?

:not() Selektordiskrepanz zwischen Safari, Chrome und Firefox

Browser implementieren häufig Funktionen mit unterschiedlichen Fähigkeiten, was zu Rendering-Diskrepanzen führt. Der CSS-Selektor :not() ist ein solcher Fall, bei dem er in Safari, Chrome und Firefox unterschiedliche Verhaltensweisen aufweist.

Problem:

Der :not() Der Selektor funktioniert nicht wie erwartet, wenn im Argument mehrere Ebenen angegeben werden. In diesem Beispiel:

em:not(div) {
    color: red
}
em:not(p div) {
    color: blue
}

Safari stellt den Text in Blau dar, während Chrome und Firefox Rot verwenden.

Ursache:

Die Grundursache ist Safaris jüngste Implementierung des :not()-Selektors der Stufe 4, der komplexe Selektoren als Argumente zulässt. Chrome und Firefox hingegen unterstützen in der aktuellen Version von :not() nur einstufige Argumente.

Erklärung:

Ein komplexer Selektor umfasst mehrere Durch Kombinatoren getrennte zusammengesetzte Selektoren (z. B. Nachkomme, Geschwister). In diesem Fall ist „p div“ ein komplexer Selektor, der aus zwei zusammengesetzten Selektoren („p“ und „div“) besteht, die durch den Nachkommenkombinator getrennt sind.

Erwartetes Verhalten:

Gemäß der Level-4-Spezifikation von :not() sollte der Selektor die „blaue“ Regel auf jedes „em“-Element anwenden, das sich nicht in einem „div“-Element befindet. unabhängig davon, ob es in einem „p“-Element verschachtelt ist.

Aktueller Status:

Es wird erwartet, dass Chrome und Firefox die neue Spezifikation irgendwann übernehmen werden, was dazu führt konsistentes Verhalten über alle Browser hinweg. Bis dahin sollten sich Entwickler möglicher Unstimmigkeiten bei der Verwendung von :not()-Selektoren mit mehreren Ebenen in diesen Browsern bewusst sein.

Das obige ist der detaillierte Inhalt vonWarum verhält sich der CSS-Selektor „:not()' in Safari, Chrome und Firefox unterschiedlich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!