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

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

Les navigateurs implémentent souvent des fonctionnalités avec des capacités variables, entraînant des écarts de rendu. Le sélecteur CSS :not() est un de ces cas, où il présente des comportements différents dans Safari, Chrome et Firefox.

Problème :

Le :not() le sélecteur ne fonctionne pas comme prévu lors de la spécification de plusieurs niveaux dans l'argument. Dans cet exemple :

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

Safari affiche le texte en bleu, tandis que Chrome et Firefox utilisent du rouge.

Cause :

La cause première est l'implémentation récente par Safari du sélecteur :not() de niveau 4, qui autorise des sélecteurs complexes comme arguments. Chrome et Firefox, en revanche, ne prennent en charge que les arguments à un seul niveau dans la version actuelle de :not().

Explication :

Un sélecteur complexe comprend plusieurs sélecteurs composés séparés par des combinateurs (par exemple, descendant, frère ou sœur). Dans ce cas, "p div" est un sélecteur complexe composé de deux sélecteurs composés ("p" et "div") séparés par le combinateur descendant.

Comportement attendu :

Selon la spécification de niveau 4 de :not(), le sélecteur doit appliquer la règle "bleue" à tout élément "em" qui n'est pas à l'intérieur d'un élément "div", qu'il soit ou non. est imbriqué dans un élément "p".

État actuel :

Il est prévu que Chrome et Firefox finiront par adopter la nouvelle spécification, conduisant à un comportement cohérent dans tous les navigateurs. . D'ici là, les développeurs doivent être conscients des divergences potentielles lors de l'utilisation de sélecteurs :not() à plusieurs niveaux dans ces navigateurs.

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!