CSS :isселекторы

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

Пример

Мы надеемся включить<p>Установите цвет тега:

:is(p) { color: red; }

Попробуйте сами »

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

CSS:isПсевдокласс — это обобщённый селектор, который позволяет объединять несколько селекторов вместе, чтобы их можно было повторно использовать в правилах CSS.

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

1. Объединение селекторов типа элементов

:is(h1, h2, h3) {
    color: red;
}

Этот код установит красный цвет текста для всех элементов h1, h2 и h3.

2. Объединение селекторов классов

:is(.highlight, .warning) {
    font-weight: bold;
}

Этот код сделает шрифт полужирным для всех элементов, у которых есть класс highlight или warning.

3. Объединение разных типов селекторов

:is(a[href^="https"], button[disabled]) {
    cursor: pointer;
}

Этот код установит курсор в виде указателя для всех ссылок, начинающихся с https, и для кнопок в отключённом состоянии.

Примечание

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

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

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

Селекторы
:invalid 10.0 10.0 4.0 5.0 10.0

Синтаксис CSS

:is(selector1, selector2, ..., selectorN) {
    /* 样式规则 */
}
  • selector1, selector2, ..., selectorNЭто последовательность селекторов, которые могут быть типами элементов, селекторами классов, селекторами атрибутов, псевдоклассами и т. д.

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

Другие расширения