Почему мой jQuery: not() не работает в CSS?

Ответ 1

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

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

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

/* 
 * Select any section
 * that 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() означает элементы фильтрации, которые не соответствуют ни одному из перечисленных селекторов.

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

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

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

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

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

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

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

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

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

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

• Вы не можете комбинировать простые селектора в составных селекторах для использования с :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.

• Вы не можете использовать комбинаторы. Это работает в 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 и поэтому очень ограничены в утилите.

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

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

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

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