: non () Divergence du sélecteur entre Safari, Chrome, et Firefox

Les navigateurs implémentent souvent des fonctionnalités avec des capacités variables, conduisant à rendre les écarts. Le sélecteur CSS: Not () est un tel cas, où il présente différents comportements à travers Safari, Chrome et Firefox.

Problème:

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

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

Safari rend le texte en bleu, tandis que Chrome et Firefox utilisent le rouge. Chrome et Firefox, en revanche, ne prennent en charge que les arguments de niveau unique dans la version actuelle de: Not ().

Explication:

Un sélecteur complexe comprend plusieurs sélecteurs composés séparés par 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 comportement attendu descendant. Il est imbriqué à l'intérieur d'un élément "p".

État actuel:

Il est prévu que Chrome et Firefox adopteront éventuellement la nouvelle spécification, conduisant à un comportement cohérent entre les navigateurs. Jusque-là, les développeurs doivent être conscients des écarts potentiels lorsqu'ils utilisent: Not () sélecteurs avec plusieurs niveaux dans ces navigateurs.