CSS3 :notСелекторы

Полное справочное руководство по селекторам CSS

Определение и использование

Селектор :not(selector) выбирает каждый элемент, который не является указанным элементом/селектором.

Псевдокласс :not в CSS позволяет выбрать все элементы, кроме указанного селектора. Это способ применять стили, исключая определённые элементы.

Базовый синтаксис

css
:not(selector) {
  /* 样式规则 */
}

• selector: Это селектор, который вы хотите исключить.

1. Исключение элементов определённого типа

body :not(p) {
  color: blue;
}

Этот код установит синий цвет текста для всех элементов внутри элемента body, кроме элементов p.

2. Исключение элементов с определённым классом

div :not(.highlight) {
  background-color: gray;
}

Этот код установит серый цвет фона для всех элементов внутри элемента div, не имеющих класса highlight.

3. Исключение нескольких селекторов

:not(div, span) {
  font-size: 14px;
}

Этот код установит размер шрифта 14 пикселей для всех элементов на странице, которые не являются ни div, ни span.

4. Исключение псевдоклассов

a:not(:hover) {
  color: black;
}

Этот код установит чёрный цвет текста для всех ссылок, которые не находятся в состоянии hover.

5. Исключение селекторов атрибутов

input:not([type="text"]) {
  border: none;
}

Этот код удалит границу у всех элементов input, которые не имеют type="text".

Примечание

• :notПсевдоклассы являются частью селекторов CSS3 и широко поддерживаются браузерами.
• :notПсевдоклассы могут повысить гибкость CSS-кода, позволяя более точно управлять применением стилей.
• Вы можете:notВ псевдоклассах используйте один селектор или несколько селекторов, разделённых запятыми.

Поддержка браузеров

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

Полное справочное руководство по селекторам CSS