Pourquoi le sélecteur `:not()` se comporte-t-il différemment dans Safari par rapport à Chrome et Firefox ?

:not() Différence de sélecteur : Safari versus Chrome/Firefox

Le sélecteur CSS :not(), utilisé pour exclure des éléments spécifiques de une sélection, s'est avérée se comporter différemment dans Safari par rapport à Chrome et Firefox. Cette divergence a semé la confusion chez les développeurs, les incitant à enquêter sur sa cause sous-jacente.

Selon des observations récentes, Safari prend désormais entièrement en charge la spécification de niveau 4 de :not(), qui autorise des sélecteurs complexes dans ses arguments. Cette fonctionnalité l'aligne sur l'implémentation de jQuery. Cependant, Chrome et Firefox ne prennent actuellement en charge que des sélecteurs simples comme arguments pour :not().

L'anomalie du sélecteur :not() provient de l'utilisation de sélecteurs complexes entre ses parenthèses. Un sélecteur complexe comprend plusieurs sélecteurs simples reliés par des combinateurs, tels que descendant, frère adjacent et frère général. Dans l'extrait de code fourni, le sélecteur p div représente un sélecteur complexe, car il combine deux sélecteurs simples (p et div) avec un combinateur descendant.

Étant donné que Chrome et Firefox ne prennent pas en charge les sélecteurs complexes pour :not( ), la partie p div du code fourni n'est pas reconnue. En conséquence, le sélecteur :not() est effectivement ignoré et la règle de secours em:not(...) s'applique. Cette règle de secours, qui spécifie le rouge comme couleur pour tous les éléments , est responsable du texte rouge observé dans Chrome et Firefox.

À l'inverse, Safari, avec sa prise en charge des sélecteurs complexes dans :not() , exclut correctement les éléments dans

éléments de la spécification de couleur rouge. Cela entraîne l'affichage du texte bleu dans Safari.

À l'heure actuelle, le calendrier pour lequel Chrome et Firefox prendront en charge les sélecteurs complexes pour :not() reste incertain. Cependant, la mise en œuvre de la spécification de niveau 4 dans Safari constitue un développement important qui l'aligne sur les dernières normes Web et offre des fonctionnalités améliorées pour les sélecteurs CSS.

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!