Калькулятор специфічності CSS
CSS-селектори
Підсумок
Результати specificity
Про CSS Specificity Calculator
CSS specificity визначає, який селектор перемагає, коли кілька правил застосовуються до одного елемента. Калькулятор показує A-B-C score для кожного селектора.
Інструмент рахує ID, класи, атрибути, pseudo-classes, елементи та pseudo-elements, включно з :is(), :not(), :has() і :where().
Як користуватися
- Вставте один селектор на рядок, список через кому або повні CSS-правила.
- Натисніть Аналізувати, щоб розрахувати specificity для кожного селектора.
- Порівняйте A-B-C scores і перевірте, який селектор найсильніший.
Поради
- Уникайте зайвих ID, якщо хочете CSS, який легко перевизначати.
- :where() завжди має нульову specificity, що корисно для низькопріоритетних default styles.
- Якщо specificity однакова, зазвичай перемагає правило, яке йде пізніше в CSS.
Перевірки CSS specificity перед зміною override
Оцінка selector пояснює лише одну частину cascade. Layer order, origin, importance, scope і source order також можуть визначити переможця.
Порівняйте весь cascade
Перевірте origin, cascade layers, !important, specificity, scoping proximity і source order, перш ніж збільшувати вагу selector.
Зберігайте selectors підтримуваними
Надавайте перевагу classes і чітким межам компонентів замість IDs, глибокої вкладеності або каскаду !important.
Перевірте functional selectors
Враховуйте, що :is(), :not() і :has() використовують specificity аргументів, тоді як :where() завжди має нульову specificity.
Тестуйте реальний стан
Перевірте hover, focus, disabled, responsive, theme і динамічно додані стани у browser developer tools.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.