Heim > Web-Frontend > CSS-Tutorial > Warum zeigen Safari, Chrome und Firefox unterschiedliche Ergebnisse mit dem CSS-Selektor „:not()' an?

Warum zeigen Safari, Chrome und Firefox unterschiedliche Ergebnisse mit dem CSS-Selektor „:not()' an?

Barbara Streisand
Freigeben: 2024-12-16 05:24:09
Original
299 Leute haben es durchsucht

Why Do Safari, Chrome, and Firefox Display Different Results with the CSS `:not()` Selector?

:not()-Selektordiskrepanz in Safari, Chrome und Firefox

Der :not()-Selektor wird verwendet, um Elemente auszuwählen, die dies tun stimmt nicht mit einem angegebenen Satz von Selektoren überein. Es kann jedoch zu Inkonsistenzen im Verhalten dieses Selektors in verschiedenen Browsern kommen, wie wir im folgenden Code sehen können:

em:not(div) {
    color: red
}
em:not(p div) {
    color: blue
}
Nach dem Login kopieren
<p>
    <em>FOO</em>
</p>
Nach dem Login kopieren

In Safari stellt der obige Code den Text „FOO“ in Blau dar. während es in Chrome und Firefox in Rot gerendert wird. Dieses Verhalten ist auf ein aktuelles Update in Safari zurückzuführen, das die Level-4-Version von :not() implementiert, wodurch komplexere Selektoren verarbeitet werden können.

In der aktuellen Implementierung von :not() nur einzelne einfache Selektoren werden als Argumente unterstützt. Komplexe Selektoren wie „p div“ werden derzeit vom Design nicht unterstützt. Daher gilt in Chrome und Firefox die :not(p div)-Regel nicht und der „FOO“-Text erbt die rote Farbe gemäß der ersten Regel.

Safari hat jedoch die fortgeschrittenere implementiert Spezifikation der Stufe 4, die komplexe Selektoren für :not()-Argumente ermöglicht. Daher stimmt die :not(p div)-Regel mit dem „FOO“-Element überein, was zur blauen Farbe führt.

Diese Diskrepanz verdeutlicht die potenziellen Herausforderungen und Überlegungen bei der Entwicklung browserübergreifend kompatibler Websites. Da neuere Browserversionen aktualisierte CSS-Spezifikationen einführen, wird es notwendig, die Browserkompatibilität und mögliche Implementierungsunterschiede im Auge zu behalten.

Das obige ist der detaillierte Inhalt vonWarum zeigen Safari, Chrome und Firefox unterschiedliche Ergebnisse mit dem CSS-Selektor „:not()' an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage