🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Как считается вес селектора?
Вес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов.
( inline, id, class/атрибут/псевдокласс, элемент/псевдоэлемент )
Пример
/* Специфичность: (0, 1, 0, 0) */
#header { color: red; }
/* Специфичность: (0, 0, 1, 0) */
.header { color: blue; }
/* Специфичность: (0, 0, 0, 1) */
h1 { color: green; }
🟠Примеры сравнения специфичности
Пример 1
h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */
Пример 2
h1 { color: red; } /* (0,0,0,1) */
#main { color: blue; } /* (0,1,0,0) */
Пример 3 (комбинированные селекторы)
h1.title { color: red; } /* (0,0,1,1) */
#main h1 { color: blue; } /* (0,1,0,1) */
Пример 4 (инлайн-стиль всегда сильнее)
Заголовок
h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */
#main { color: purple; } /* (0,1,0,0) */
🟠Как повысить вес селектора?
Добавить ID (но не злоупотреблять). Использовать более специфичные селекторы (например, .header h1 вместо h1). Использовать !important (но осторожно!).
h1 { color: red !important; } /* Всегда будет красным */
Ставь 👍 и забирай 📚 Базу знаний