CSS калькулятор специфичности
Анализируйте специфичность CSS селекторов для понимания правил каскада
Ввод CSS селекторов
Как работает специфичность CSS
Специфичность определяет, какие CSS правила применяются к элементу, когда несколько правил конфликтуют. Более специфичные селекторы имеют приоритет.
Уровни специфичности
1-0-0-0
Инлайн стили (style="")0-1-0-0
ID селекторы (#example)0-0-1-0
Классы, атрибуты, псевдоклассы0-0-0-1
Элементы и псевдоэлементыПримеры
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