Pourquoi Safari, Chrome et Firefox affichent-ils des résultats différents avec le sélecteur CSS `:not()` ?

:not() Différence de sélecteur dans Safari, Chrome et Firefox

Le sélecteur :not() est utilisé pour sélectionner les éléments qui le font ne correspond pas à un ensemble spécifié de sélecteurs. Cependant, il peut y avoir des incohérences dans le comportement de ce sélecteur d'un navigateur à l'autre, comme nous pouvons le voir dans le code suivant :

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

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

Dans Safari, le code ci-dessus affiche le texte "FOO" en bleu, tandis que dans Chrome et Firefox, il s'affiche en rouge. Ce comportement est dû à une mise à jour récente de Safari qui implémente la version niveau 4 de :not(), ce qui lui permet de gérer des sélecteurs plus complexes.

Dans l'implémentation actuelle de :not(), un seul simple les sélecteurs sont pris en charge comme arguments. Les sélecteurs complexes, tels que « p div », ne sont actuellement pas pris en charge par la conception. Par conséquent, dans Chrome et Firefox, la règle :not(p div) ne s'applique pas et le texte « FOO » hérite de la couleur rouge selon la première règle.

Safari, cependant, a implémenté la méthode la plus avancée. spécification de niveau 4, autorisant des sélecteurs complexes pour les arguments :not(). Par conséquent, la règle :not(p div) correspond à l'élément « FOO », ce qui donne la couleur bleue.

Cette divergence met en évidence les défis et considérations potentiels lors du développement de sites Web compatibles avec plusieurs navigateurs. À mesure que les versions plus récentes des navigateurs introduisent des spécifications CSS mises à jour, il devient nécessaire de suivre la compatibilité des navigateurs et les différences potentielles d'implémentation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!