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

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

<p>
    <em>FOO</em>
</p>

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!