PixelTool

CSS калькулятор специфичности

Анализируйте специфичность CSS селекторов для понимания правил каскада

CSS Селекторы

Анализ специфичности

Введите CSS селекторы для анализа их специфичности

Как работает CSS специфичность

CSS специфичность определяет, какие стили применяются, когда несколько правил нацелены на один элемент. Она рассчитывается с использованием четырехчастного значения: инлайн стили, ID, классы/атрибуты/псевдоклассы и элементы

Расчет специфичности

1-0-0-0
Инлайн стили
0-1-0-0
ID селекторы (#id)
0-0-1-0
Классы (.class), атрибуты [attr], псевдоклассы (:hover)
0-0-0-1
Элементы (div, p, a) и псевдоэлементы (::before)

Примеры

body
0-0-0-1
.header
0-0-1-0
#main
0-1-0-0
#nav .active
0-1-1-0

Часто задаваемые вопросы

PixelTool - Инструменты Разработчика