🎯 CSS Specificity Calculator
Рассчитай специфичность CSS селекторов и сравни их приоритеты
Добавь селекторы для расчёта специфичности
💡 Что такое специфичность?
Специфичность (Specificity) — это правило CSS, определяющее, какие стили применяются к элементу, если есть конфликтующие правила. Браузер выбирает правило с большей специфичностью.
Специфичность рассчитывается по 4 позициям (a, b, c, d):
Inline стили (style="...")
1, 0, 0, 0
ID селекторы (#id)
0, 1, 0, 0
Классы, атрибуты, псевдоклассы (.class, [attr], :hover)
0, 0, 1, 0
Элементы, псевдоэлементы (div, ::before)
0, 0, 0, 1
Примеры:
*
0, 0, 0, 0
li
0, 0, 0, 1
ul li
0, 0, 0, 2
.class
0, 0, 1, 0
ul .class
0, 0, 1, 1
#id
0, 1, 0, 0
#id .class
0, 1, 1, 0
💡 Что такое специфичность?
Специфичность (Specificity) — это правило CSS, определяющее, какие стили применяются к элементу, если есть конфликтующие правила. Браузер выбирает правило с большей специфичностью.
Специфичность рассчитывается по 4 позициям (a, b, c, d):
- Inline стили (style="...") → 1, 0, 0, 0
- ID селекторы (#id) → 0, 1, 0, 0
- Классы, атрибуты, псевдоклассы (.class, [attr], :hover) → 0, 0, 1, 0
- Элементы, псевдоэлементы (div, ::before) → 0, 0, 0, 1
💡 Советы по использованию
- Избегайте использования
!important— это нарушает каскад CSS - Используйте классы вместо ID для стилей — это делает код более гибким
- Чем проще селектор, тем легче поддерживать код
- Используйте методологию BEM для именования классов
❓ Часто задаваемые вопросы
Что такое специфичность в CSS?
Специфичность — это система приоритетов, которая определяет, какое CSS-правило применяется к элементу при наличии конфликтов. Чем выше специфичность селектора, тем выше его приоритет.
Как рассчитать специфичность?
Специфичность рассчитывается по 4 позициям: inline стили (1,0,0,0), ID селекторы (0,1,0,0), классы/атрибуты/псевдоклассы (0,0,1,0), элементы/псевдоэлементы (0,0,0,1). Сложите значения для всех частей селектора.
Почему мой CSS не применяется?
Возможно, другой селектор имеет большую специфичность. Проверьте специфичность всех конфликтующих селекторов с помощью этого калькулятора. Также убедитесь, что стили загружаются в правильном порядке.