CSS3: псевдокласс не отрицания не полностью поддерживается Firefox?

Я пытаюсь использовать псевдокласс CSS3 :not, как определено в спецификации. Согласно спецификации:

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

Поэтому я ожидаю, что смогу сделать что-то вроде этого:

p:not(.class1, .class2)

Но, похоже, это не работает в Safari или Firefox, которые должны иметь ПОЛНУЮ поддержку этого селектора.

Это работает, когда аргумент является одним селектором, например:

Вот пример, показывающий проблему: Пример jsFiddle

p:not(.class1)

Согласно этому сообщению в блоге, этот автор предлагает вам иметь возможность указывать несколько селекторов в качестве аргумента.

Кроме того, в соответствии с этим Справочником по CSS3 SitePoint, Firefox, Safari и Chrome имеют ПОЛНУЮ поддержку: не селектор.

Я неправильно истолковываю спецификацию или браузеры на самом деле имеют только частичную поддержку этого селектора?


css css-selectors
person Camsoft    schedule 21.03.2011    source источник
comment
.class1, .class2 не является простым селектором, и по определению :not(X) принимает только простые селекторы в качестве аргументов.   -  person Šime Vidas    schedule 21.03.2011
comment
Этот пост в блоге неверен. Если Firefox поддерживал несколько селекторов в одном отрицании, это больше не так, и такое поведение было ошибкой.   -  person BoltClock    schedule 21.03.2011
comment
@BoltClock Правильно - попробовал это в FF3.6 и FF4, и это не сработает, поэтому парень должен ошибаться, также дата блога - 25 августа 2008 года, когда css3 был еще младенцем.   -  person easwee    schedule 21.03.2011

Ответы (3)


arrow_upward
10
arrow_downward

В CSS запятая (,) разделяет селекторы. Это не селектор, поэтому его нельзя использовать внутри селектора. Итак, в зависимости от того, хотите ли вы применить правило к

  • абзацы, отличные от .class1, и абзацы, отличные от .class2,
  • абзацы, в которых нет ни .class1, ни class2, ни
  • абзацы без .class1 и .class2

it's

p:not(.class1), p:not(.class2) {
}

or 

p:not(.class1):not(.class2) {
}

or 

p:not(.class1.class2) {
}

Кстати, ИМХО лучше избегать :not, если это возможно, и в этом случае, например, иметь общее правило, которое применяется ко всем p (со свойствами, которые вы хотите установить в :notrule), и одно, которое применяется к тем, у которых есть класс и переопределения свойства первого правила, если это необходимо.

person RoToRa    schedule 21.03.2011
comment
p:not(.class1.class2) не будет работать. Это недопустимая разметка. - person easwee; 21.03.2011
comment
@BoltClock Да, синтаксис/код/что угодно - я часто путаю термины. Английский не мой родной язык :) - person easwee; 21.03.2011
comment
По-прежнему не работает, см.: jsfiddle.net/yw3fE - мне нужны все теги P, которые имеют либо .po или .no следует исключить. - person Camsoft; 21.03.2011
comment
Хорошо, кажется, что ваш второй пример имеет желаемый эффект. - person Camsoft; 21.03.2011

arrow_upward
3
arrow_downward

Вы можете связать их (у меня их список тоже не сработал)...

p:not(.class1):not(.class2) {
  ...  
}

jsFiddle.

У меня работает в Chrome 10.

person alex    schedule 21.03.2011

arrow_upward
3
arrow_downward

Будь осторожен с:

p:not(.class1), p:not(.class2) {
}

Потому что это то же самое, что и вызов p {} (когда вы разделяете ",", это означает объединение). Первый набор эффектных тегов (теги p без класса class1) объединяется со вторым набором эффектных тегов (теги p без класса class2).

person Phuong7410    schedule 19.05.2012