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

Question

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

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

Так что я ожидал бы, что смогу сделать что-то вроде этого:

p:not(.class1, .class2)

Но, похоже, он не работает вSafari или Firefox, которые должны иметь полную поддержку для этого селектора.

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

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

p:not(.class1)

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

Также в соответствии с этим CSS3 SitePoint Reference , Firefox, Safari и Chrome имеют ПОЛНУЮ поддержку для селектора: not.

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

Answer 1

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

• абзацам, которые не являются .class1, и абзацам, которые не .class2,
• , которые не имеют ни .class1, ниclass2 или
• абзацы, которые не имеют .class1 и .class2

это

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

или

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

или

p:not(.class1.class2) {
}

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

Answer 2

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

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

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

Answer 3

Вы можете цепочка их (перечисление их также не работает для меня) ...

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

jsFiddle .

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