Обчисліть специфічність 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 кудись?
Ні. Ваш браузер розбирає і зіставляє селектори у цій вкладці, і нічого не надсилається на сервер.
Відгуки
Відгуків поки немає. Будьте першим.