Объединение: not() селекторов в CSS

Я пытаюсь выбрать все tr элементы внутри table, кроме третьего и четвертого. Мне удалось это сделать, используя:

Я хотел бы объединить эти селекторы, потому что у меня есть еще несколько записей :nth-child. Что-то вроде этого, но это не сработало:

Это работает в jQuery, но не в CSS. Я использую Chrome (и мне нужно, чтобы он работал там).

Мне не удалось найти комбинированный селектор для этого случая. Как объединить селектор с :not?

Ответы

Ответ 1

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

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

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

Здесь список селекторов - это просто список селекторов, разделенных запятыми.

Если вам нужно отменить селекторы, содержащие комбинаторы (>, +, ~, пробел и т.д., например div p), вы не можете использовать :not() в CSS; вам придется пойти с решением jQuery.

Ответ 2

Хотя отмеченный ответ верен, я просто хочу указать, что вы можете достичь того, что хотите использовать css, но только по-другому. Вместо использования не вы можете выбрать те и не использовать материал, который вам не нужен.

#table tr {
    /* general case styling */
    color: blue;
}
#table tr:nth-child(3),
#table tr:nth-child(4) {
    color: black;
}