Калькулятор CSS специфічності
Обчисліть специфічність CSS селекторів і дізнайтеся, який з них перемагає.
Калькулятор CSS специфічності
Вставте один або кілька CSS селекторів, по одному в рядку, і цей інструмент обчислить специфічність кожного як стандартну триступеневу оцінку: ID селектори, класи (плюс атрибути і псевдо-класи) та елементи (плюс псевдо-елементи). Специфічність визначає, яке конфліктуюче правило застосує браузер, тому це корисно, коли два правила стилів спрямовані на один елемент і вам потрібно знати, яке перемагає, або коли ви налагоджуєте, чому переопис не працює.
Увімкніть опцію «Розділити списки, розділені комами», щоб оцінити кожен селектор у списку на кшталт ".a, .b" на своєму рядку замість об'єднання їх в один. Опція «Сортувати від найсильніших» переупорядковує результати від найбільшої специфічності до найменшої. Виберіть формат виведення «Таблиця» для макета зі стовпцями для ID, класів та елементів окремо, або «0-1-2 нотація» для компактної оцінки на кшталт "1-0-2" для кожного селектора. Опція «Показати пояснення розбору» виводить список того, яка частина кожного селектора — ID, клас, елемент — внесла внесок у оцінку, що найшвидше показує, чому одне правило переважає інше.
Калькулятор дотримується специфікації CSS Selectors для складних випадків: :where() завжди має специфічність нуль незалежно від його вмісту, тоді як :is(), :not() і :has() приймають специфічність свого найбільш специфічного аргументу. Селектор, що містить !important, позначається, оскільки це переопис звичайного каскаду незалежно від специфічності і варто знати, навіть якщо це не частина власної оцінки селектора. Символи кінця рядка Windows та Unix обробляються однаково, і пусті рядки ігноруються.
Усе працює локально у вашому браузері — селектори, які ви вставляєте, ніколи не завантажуються нікуди, що важливо, якщо ви перевіряєте приватну кодову базу. Скопіюйте результат, завантажте його як файл .txt або відправте вихідні дані назад у вхід, щоб продовжити уточнення ваших селекторів.