Калькулятор специфичности CSS
Вставьте селекторы, по одному на строку, и посмотрите разбивку специфичности каждого из них, отсортированную в том порядке, в котором каскад применял бы их на самом деле.
Результаты появятся здесь, отсортированные от самой высокой специфичности к самой низкой.
Как это работает
Каждый селектор разбивается по комбинаторам и токенизируется: токены #id считаются
как ID, .class, [attr] и :pseudo-class — как классы, а
обычные имена элементов и ::pseudo-elements — как элементы. Универсальный селектор
* и комбинаторы вроде >, +, ~ ничего не
добавляют. В итоге каждый селектор превращается в тройку (ID, классы, элементы) —
именно так сама спецификация CSS определяет специфичность, поэтому результаты здесь совпадают
с тем, что сделает каскад в вашем браузере.
Всё пересчитывается при каждом нажатии клавиши прямо в JavaScript этой страницы. Даже если вы вставите селекторы из целой таблицы стилей, они никогда не покинут ваш браузер.
Частые вопросы
Как рассчитывается специфичность?
Специфичность считается по четырём уровням: инлайн-стили, затем ID-селекторы, затем классы, селекторы атрибутов и псевдоклассы, затем элементы и псевдоэлементы. Более высокий уровень всегда побеждает более низкий, сколько бы селекторов низкого уровня вы ни добавили, поэтому один ID (0,1,0,0) всегда обходит 20 классов (0,0,20,0).
Почему два моих селектора получают одинаковый результат?
Когда специфичность совпадает полностью, CSS опирается на порядок в исходном коде: побеждает правило, которое находится ниже в таблице стилей (или было добавлено позже). Этот инструмент сортирует совпадения в том порядке, в котором вы их вставили, повторяя это поведение.
Отправляется ли мой CSS куда-либо?
Нет. Селекторы разбираются и оцениваются полностью в вашем браузере с помощью небольшого JavaScript-токенизатора. Ничего не загружается на сервер.