Pourquoi mon jQuery :non() sélecteur de ne pas travailler en CSS?

Pourquoi le :not() sélecteur de travail en jQuery, mais ne parviennent pas dans le CSS? Ne faut-il pas travailler de manière identique dans les deux lieux depuis jQuery prétend être "CSS3 Conforme", ou est-il quelque chose que je suis absent?

Peut-être qu'il devrait, mais il s'avère qu'il n'est pas: jQuery étend le :not() sélecteur tels que vous pouvez passer tout le sélecteur pour elle, peu importe la complexité, il peut être, et je soupçonne que la principale raison pour cela est pour la parité avec le .non() méthode, qui prend également en tout arbitraire sélecteur complexe et filtres en conséquence. Il le fait de façon à maintenir un CSS syntaxe, mais elle s'étend à partir de ce qui est défini dans la norme.

Comme autre exemple, cela fonctionne bien (je sais que c'est incroyablement ridicule exemple par rapport à ce qui est donné dans la question, mais c'est juste pour illustrer):

/* 
* Select any section
* that's neither a child of body with a class
* nor a child of body having a descendant with a class.
*/
$('section:not(body > [class], body > :has([class]))')

jsFiddle aperçu

Rappelez-vous que l'adoption d'une liste séparée par des virgules des sélecteurs de :not() moyens de filtrage des éléments qui ne correspondent pas à la liste des sélecteurs.

Maintenant la :non() pseudo-classe dans les Sélecteurs de niveau 3, d'autre part, est très limité par lui-même. Vous ne pouvez passer un simple sélecteur de comme un argument de :not(). Cela signifie que vous pouvez passer qu'un à la fois:

• Sélecteur universel (*), éventuellement avec un espace de noms
• Sélecteur de Type de (a, div, span, ul, li, etc), éventuellement avec un espace de noms
• Sélecteur d'attributs ([att], [att=val], etc), éventuellement avec un espace de noms
• Sélecteur de classe (.class)
• Sélecteur d'ID (#id)
• Pseudo-classe (:pseudo-class)

Donc, voici les différences entre jQuery :non() sélecteur et la norme actuelle est :non() sélecteur:

1. D'abord et avant tout, pour répondre directement à la question: vous ne pouvez pas passer par une virgule liste de sélection.¹ Par exemple, alors que le sélecteur de donnée fonctionne en jQuery, comme le montre le violon, il n'est pas valide CSS:

   /* If it's not in the Α, Β or Γ sectors, it's unassigned */
   #sectors > div:not(.alpha, .beta, .gamma)

   Est-il un pur CSS solution de contournement pour ce ou vais-je devoir compter sur un script?

   Heureusement, dans ce cas, il est. Vous avez simplement à la chaîne de multiples :not() sélecteurs, l'un après l'autre, afin de la rendre valide CSS:

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

   Il ne fait pas le sélecteur que beaucoup plus de temps, mais l'incohérence et les inconvénients restent évidents.

   Mise à jour interactive jsFiddle aperçu

2. Vous ne pouvez pas combiner les sélecteurs simples composés de sélecteurs pour une utilisation avec :not(). Cela fonctionne en jQuery, mais n'est pas valide CSS:

   /* Do not find divs that have all three classes together */
   #foo > div:not(.foo.bar.baz)

   Vous aurez besoin de le diviser en plusieurs négations (et pas seulement de la chaîne d'eux!) pour la rendre valide CSS:

   #foo > div:not(.foo), #foo > div:not(.bar), #foo > div:not(.baz)

   Comme vous pouvez le voir, c'est encore plus gênant que le point 1.

3. Vous ne pouvez pas utiliser les combinators. Cela fonctionne en jQuery, mais pas CSS:

   /* 
   * Grab everything that is neither #foo itself nor within #foo.
   * Notice the descendant combinator (the space) between #foo and *.
   */
   :not(#foo, #foo *)

   C'est un cas méchant, principalement parce qu'il n'a pas de véritable solution de contournement. Il y a quelques lâche solutions de contournement (Un et Deux), mais ils ont presque toujours dépendent de la structure HTML et sont donc très limitée dans l'utilitaire.

4. Dans un navigateur qui implémente querySelectorAll() et la :not() sélecteur, à l'aide de :not() dans un sélecteur de chaîne dans une manière qui le rend un selecteur CSS valide sera la cause de la méthode de retourner des résultats directement, au lieu de retomber à Grésiller (jQuery sélecteur moteur qui met en œuvre la :not() extension). Si vous êtes un acharné pour la performance, c'est une façon positive de minuscules bonus, vous aurez certainement saliver plus.

La bonne nouvelle, c'est que Sélecteurs 4 améliore le :non() sélecteur pour permettre une liste séparée par des virgules de complexe sélecteurs. Un sélecteur complexe est tout simplement soit un solitaire simple ou composé sélecteur, ou un ensemble de la chaîne de composé sélecteurs séparés par combinators. En bref, tout ce que vous voyez ci-dessus.

Cela signifie que le jQuery exemples ci-dessus entrera en vigueur le niveau 4 sélecteurs, qui va faire de la pseudo-classe beaucoup, beaucoup plus utile lors de la CSS implémentations de commencer la soutenir dans les années à venir.

¹ _{Bien que cet article dit que vous pouvez transmettre une liste séparée par des virgules des sélecteurs de :not() dans Firefox 3, vous n'êtes pas censé être en mesure de. Si cela fonctionne dans Firefox 3 que cet article prétend, alors c'est à cause d'un bug dans Firefox 3, pour lesquelles je ne peux pas trouver le billet, mais il ne devrait pas travailler jusqu'à ce que le futur mettre en œuvre les futures normes. Voir combien de fois que l'article est cité à ce jour, j'ai laissé un commentaire à cet effet, mais de voir aussi comment l'ancien article est et la maniere dont le site est en cours de mise à jour, je ne suis vraiment pas compter sur l'auteur de revenir à résoudre.}