Как посчитать специфичность CSS и понять, какое правило побеждает
Вставьте селекторы, чтобы посчитать их специфичность, или CSS и элемент, чтобы увидеть применяемое правило.
- Работает на вашем устройстве
- Без регистрации
- Работает офлайн после первого визита
Стили браузера по умолчанию и другие таблицы стилей не учитываются. Ничего никуда не отправляется.
| Селектор | Специфичность | Вес | Контекст |
|---|
| Правило | Значение | Специфичность | Слой | Результат |
|---|
Как как понять, какое правило CSS побеждает
- Выберите режим: подсчёт селекторов или поиск победившего правила.
- Вставьте селекторы или CSS, HTML и свойство.
- Смотрите результат или победившее правило и причины, почему остальные проиграли.
Вопросы
Как считается специфичность?
Каждый id даёт 1,0,0, каждый класс, атрибут или псевдокласс — 0,1,0, а каждое имя элемента или псевдоэлемент — 0,0,1. Универсальный селектор и :where() не добавляют ничего.
Как считаются :is(), :not() и :has()?
Они засчитываются по самому сильному аргументу. Так, :is(#a, .b) p даёт 1,0,1, потому что #a — самая сильная часть внутри :is(). Правило с :where(#a) p даёт 0,0,1.
Почему правило из слоя проигрывает обычному правилу?
Для обычных объявлений правила вне любого слоя побеждают правила в слоях. Для !important порядок меняется: побеждает более ранний слой. Обычный атрибут style побеждает все обычные правила таблиц стилей, а атрибут style с !important побеждает все остальные правила с !important.
Отправляется ли мой CSS куда-нибудь?
Нет. Ваш браузер разбирает и сопоставляет селекторы в этой вкладке, ничего не отправляется на сервер.
Отзывы
Отзывов пока нет. Будьте первым.