Heim >Web-Frontend >CSS-Tutorial >Warum verhält sich der Selektor „:not()' in Safari anders als in Chrome und Firefox?

Warum verhält sich der Selektor „:not()' in Safari anders als in Chrome und Firefox?

DDD
DDDOriginal
2024-11-27 09:03:11616Durchsuche

Why Does the `:not()` Selector Behave Differently in Safari Compared to Chrome and Firefox?

:not() Selektordiskrepanz: Safari versus Chrome/Firefox

Der :not() CSS-Selektor, der zum Ausschließen bestimmter Elemente verwendet wird Es wurde festgestellt, dass sich Safari, eine Auswahl davon, anders verhält als Chrome und Firefox. Diese Diskrepanz hat bei den Entwicklern für Verwirrung gesorgt und eine Untersuchung der zugrunde liegenden Ursache veranlasst.

Jüngsten Beobachtungen zufolge unterstützt Safari jetzt vollständig die Level-4-Spezifikation von :not(), die komplexe Selektoren in ihren Argumenten zulässt. Diese Funktion bringt es in Einklang mit der jQuery-Implementierung. Allerdings unterstützen Chrome und Firefox derzeit nur einfache Selektoren als Argumente für :not().

Die Selektoranomalie :not() ist auf die Verwendung komplexer Selektoren in Klammern zurückzuführen. Ein komplexer Selektor besteht aus mehreren einfachen Selektoren, die durch Kombinatoren verbunden sind, z. B. Nachkommen, benachbarte Geschwister und allgemeine Geschwister. Im bereitgestellten Codeausschnitt stellt der Selektor p div einen komplexen Selektor dar, da er zwei einfache Selektoren (p und div) mit einem abgeleiteten Kombinator kombiniert.

Da Chrome und Firefox keine komplexen Selektoren für :not( unterstützen )-Argumente wird der p div-Teil im bereitgestellten Code nicht erkannt. Infolgedessen wird der Selektor :not() praktisch ignoriert und die Fallback-Regel em:not(...) gilt. Diese Fallback-Regel, die Rot als Farbe für alle -Elemente angibt, ist für den in Chrome und Firefox beobachteten roten Text verantwortlich.

Umgekehrt gilt Safari mit seiner Unterstützung für komplexe Selektoren in :not() , schließt -Elemente innerhalb von

korrekt aus. Elemente aus der roten Farbspezifikation. Dadurch wird in Safari der blaue Text angezeigt.

Derzeit ist der Zeitplan, wann Chrome und Firefox komplexe Selektoren für :not() unterstützen werden, noch ungewiss. Die Implementierung der Level-4-Spezifikation in Safari ist jedoch eine bedeutende Entwicklung, die sie an die neuesten Webstandards anpasst und erweiterte Funktionalität für CSS-Selektoren bietet.

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

Stellungnahme:
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