: not() не ведет себя так же между Safari и Chrome/Firefox

Мне очень сложно понять, почему следующий код отображается синим цветом в Safari, но красным цветом в Chrome и Firefox.

em:not(div) {
    color: red
}
em:not(p div) {
    color: blue
}

<p>
    <em>FOO</em>
</p>

Ответ 1

Safari недавно отправила версию 4 уровня :not(), которая позволяет создавать сложные селектора для аргументов, помещая его на уровне с нестандартной реализацией jQuery. См. примечания к выпуску. текущее воплощение :not() позволяет только один простой селектор для аргумента, поэтому сложный селектор типа p div не будет работать сегодня браузеров по дизайну.

Комплексный селектор представляет собой выражение, состоящее из одного или нескольких составных селекторов, разделенных комбинаторами, такими как потомок, >, ~ и +. Составной селектор представляет собой последовательность одного или нескольких простых селекторов. div представляет собой составной селектор, состоящий из одного простого селектора, а p div представляет собой сложный селектор, состоящий из двух составных селекторов (каждый из которых состоит из одного простого селектора), разделенных комбинатором-потомком.

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

После почти пяти изнурительных лет ожидания со времени FPWD мы могли бы наконец наконец увидеть CR селекторов-4 в ближайшее время. Подумайте, что я закачан.

Ответ 2

Из spec:

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

и в другом месте в спецификации:

Простым селектором является либо селектор типов, универсальный селектор, селектор атрибутов, селектор классов, селектор идентификаторов, либо псевдокласс.

Поведение Chrome и Firefox верное. Комбинатор потомков может не отображаться в простом селекторе (и, следовательно, a: не псевдокласс)

Это может измениться в Селекторах Уровня 4. Текущий проект позволяет более сложные селектора. Кажется, вы столкнулись с экспериментальной реализацией.