CSS: не селектор не применяется правильно

81
7

Я пытаюсь применить стили ко всем элементам, кроме .reset - это и элементы, которые являются потомками .reset-this. Мой CSS не работает. Он не применяется к каким-либо элементам.


*:not(.reset-this, .reset-this *) { //styles in here }

Чтобы увидеть живой пример того, как он не работает, перейдите к этому скрипту: http://jsfiddle.net/sh39L882/1/

спросил(а) 2015-02-17T01:55:00+03:00 5 лет, 8 месяцев назад
1
Решение
107

В CSS 3, более конкретно Селекторы уровня 3:


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



Ключевым здесь является simple selector. :not имеют доступ только к простым селекторам типа .classsName, а не к вещам с , или .className .child.


Обратите внимание, что это было обновлено в Селекторы уровня 4:


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


Обратите внимание на изменение simple selector на selector list. Это означает, что то, что вы пытаетесь сделать, будет возможно, но только в браузерах, реализующих новую спецификацию.


Вы можете всегда применять стили в широком диапазоне, а затем возвращать их:


* {
color: red
}

.reset-this, .reset-this * {
color: black;
}


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

ответил(а) 2015-02-17T02:30:00+03:00 5 лет, 8 месяцев назад
70

К сожалению, вы должны быть более конкретными в своих стилях.


Во-первых, селектор подстановочных знаков (*) не может использоваться с псевдоклассами, потому что он слишком широк - он по существу отрицает :not здесь. Вместо этого вы можете использовать body :not.

Кроме того, псевдо-классы не могут быть унаследованы. Лучшая альтернатива заключается в том, чтобы ваши потомки наследовали свой родительский стиль (ы).


См. обновленную скрипту: http://jsfiddle.net/r4upf/sh39L882/2/

ответил(а) 2015-02-17T02:32:00+03:00 5 лет, 8 месяцев назад
41

Попробуйте следующее:


*:not(.reset-this), .reset-this * {
color:red;
}

http://jsfiddle.net/ymrsx8cx/

ответил(а) 2015-02-17T02:35:00+03:00 5 лет, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема