Почему селектор :not() работает в jQuery, но не работает в CSS? Не должно ли он работать одинаково в обоих местах, поскольку jQuery утверждает, что он является «совместимым с CSS3», или есть что-то, что мне не хватает?

Возможно, это должно произойти , но оказалось, что это не так : jQuery расширяет селектор :not() таким образом, что вы можете передать ему любой селектор , каким бы сложным он ни был, и я подозреваю, что основная причина этого для контроля четности с .not() , который также принимает любой произвольно сложный селектор и соответственно фильтрует. Он делает так, чтобы поддерживать синтаксис, подобный CSS, но он простирается от того, что определено в стандарте.

В качестве другого примера, это работает очень хорошо (я знаю, что это невероятно смехотворный пример по сравнению с тем, что дается в вопросе, но это просто для иллюстративных целей):

 /* * 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

Помните, что передача списка селекторов, разделенных запятыми, на :not() означает элементы фильтрации, которые не соответствуют ни одному из перечисленных селекторов .

Теперь, с другой стороны, псевдоclass classа :not() в Селекторах 3 , сам по себе очень ограничен. Вы можете передать только один простой селектор в качестве аргумента для :not() . Это означает, что вы можете передавать только один из них за раз:

• Универсальный селектор ( * ), необязательно с пространством имен
• Селектор типов ( a , div , span , ul , li и т. Д.), Необязательно с пространством имен
• Селектор атрибутов ( [att] , [att=val] и т. Д.), Необязательно с пространством имен
• Селектор classов ( .class )
• Селектор ID ( #id )
• :pseudo-class ( :pseudo-class )

Итак, вот различия между селектором jQuery :not() селектором :not() текущего стандарта :

1. Прежде всего, чтобы ответить на вопрос напрямую: вы не можете передать список селекторов, разделенных запятыми. ¹ Например, хотя данный селектор работает в jQuery, как показано в скрипте, он недействителен CSS:

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

   Есть ли способ обхода CSS для этого или мне придется полагаться на скрипт?

   К счастью, в этом случае есть. Вам просто нужно связать несколько :not() селекторов один за другим, чтобы сделать его действительным. CSS:

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

   Это не делает селектор намного длиннее, но непоследовательность и неудобства остаются очевидными.

   Обновлен интерактивный просмотр jsFiddle

2. Вы не можете комбинировать простые селектора в составных селекторах для использования с :not() . Это работает в jQuery, но недействителен CSS:

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

   Вам нужно разделить его на несколько отрицаний (а не просто на цепочку!), Чтобы сделать его действительным. CSS:

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

   Как вы можете видеть, это еще более неудобно, чем точка 1.

3. Вы не можете использовать комбинаторы. Это работает в jQuery, но не в CSS:

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

   Это особенно неприятный случай, прежде всего потому, что у него нет надлежащего обходного пути. Есть некоторые способы обхода ( 1 и 2 ), но они почти всегда зависят от структуры HTML и поэтому очень ограничены в утилите.

4. В браузере, который реализует querySelectorAll() и селектор :not() , используя :not() в селекторной строке способом, который делает его допустимым селектором CSS, заставит метод напрямую возвращать результаты, вместо того, чтобы возвращаться к Sizzle (механизм переключения jQuery, который реализует расширение :not() ). Если вы являетесь приверженцем производительности, это положительно незначительный бонус, который вы обязательно сэлизуете.

Хорошей новостью является то, что Selectors 4 улучшает селектор :not() , чтобы разрешить список сложных селекторов, разделенных запятыми. Комплексный селектор – это просто простой или составной селектор или целая цепь составных селекторов, разделенных комбинаторами. Короче говоря, все, что вы видите выше.

Это означает, что приведенные выше примеры jQuery станут действительными селекторами уровня 4, что сделает псевдоclass намного полезнее, когда реализация CSS начнет поддерживать его в ближайшие годы.

¹ _{Хотя в этой статье говорится, что вы можете передать список селекторов, разделенных запятыми, на :not() в Firefox 3, вы не должны быть в состоянии. Если это работает в Firefox 3, как утверждается в этой статье, то это потому, что ошибка в Firefox 3, для которой я больше не могу найти билет, но он не должен работать, пока будущие браузеры не будут внедрять будущие стандарты. Видя, как часто эта статья цитируется до настоящего времени, я оставил комментарий к этому вопросу, но, видя также, сколько лет статья и как редко сайт обновляется, я действительно не рассчитываю на то, что автор вернется, чтобы исправить Это.}