CSS калькулятор специфичности
Анализируйте специфичность CSS селекторов для понимания правил каскада
Ввод CSS
Результаты
Введите CSS селекторы для анализа
Как работает специфичность CSS
Специфичность определяет, какие CSS правила применяются к элементу. Более специфичные селекторы имеют приоритет.
Расчет специфичности
1-0-0-0
Инлайн стили0-1-0-0
Каждый ID (#example)0-0-1-0
Каждый класс (.example), атрибут ([type="text"]), псевдокласс (: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
Похожие инструменты
Другие полезные инструменты из той же категории
HTML древо визуализатор
Визуализируйте HTML структуру в виде дерева с валидацией БЭМ
html
tree
+3
Генератор CSS Flexbox онлайн
Бесплатный онлайн генератор CSS Flexbox. Визуальный инструмент для создания и изучения CSS Flexbox макетов с кодом
css
flexbox
+3
Генератор CSS Grid онлайн
Бесплатный онлайн генератор CSS Grid. Визуальный инструмент для создания и изучения CSS Grid макетов с кодом
css
grid
+3