Pourquoi mon sélecteur CSS `:not()` échoue-t-il et comment puis-je y remédier ?

Pourquoi le sélecteur :not() échoue en CSS

Bien que le sélecteur :not() de jQuery revendique la conformité CSS3, il diffère considérablement de la norme Sélecteur :not() en CSS.

jQuery Extension

Alors que le standard :not() n'accepte qu'un seul sélecteur simple comme argument, jQuery autorise tout sélecteur arbitraire, y compris les listes de sélecteurs séparés par des virgules.

Limitations CSS

En revanche, le standard :not() a des règles strictes limitations :

• Impossible de transmettre des sélecteurs séparés par des virgules
• Impossible de combiner des sélecteurs simples en sélecteurs composés
• Impossible d'utiliser des combinateurs (par exemple, l'espacement)

À cause de Échec

Dans le scénario donné, la modification CSS a tenté de reproduire le comportement :not() de jQuery, qui n'est pas un CSS valide pour les raisons suivantes :

• Division par la virgule (par exemple, :not(.alpha, .beta, .gamma)) n'est pas autorisée.
• Passer des sélecteurs composés (par exemple, body > div) n'est pas valide dans :not().

Solution de contournement en CSS pur

Pour obtenir le résultat souhaité en CSS pur, il est nécessaire d'enchaîner plusieurs sélecteurs :not() :

#sectors > div:not(.alpha):not(.beta):not(.gamma)

Cependant, cette approche est plus sujette aux erreurs et incohérente que Syntaxe :not() étendue de jQuery.

Développements futurs

Selectors 4 améliore :not() pour accepter une liste de sélecteurs complexes séparés par des virgules, ce qui l'alignera avec jQuery et le rendre plus polyvalent à l'avenir.

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!