Калькулятор 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 или отправьте выходные данные обратно во вход, чтобы продолжить уточнение ваших селекторов.