Ответ
Приоритет селекторов в CSS определяет, какие стили будут применены к элементу при наличии конфликтующих правил. Основные правила:
- !important - наивысший приоритет (но злоупотреблять не стоит)
- Inline-стили (style="...")
- ID (#element)
- Классы, атрибуты, псевдоклассы (.class, [type="text"], :hover)
- Элементы, псевдоелементы (div, ::before)
Чем специфичнее селектор - тем выше приоритет. При равной специфичности побеждает последнее объявленное правило.
#header .menu li { color: red; } /* 1 ID + 1 класс + 1 элемент = 111 */
.menu li.active { color: blue; } /* 2 класса + 1 элемент = 021 */В примере первый селектор имеет больший вес, поэтому цвет будет красным.
Ответ 18+ 🔞
А, слушай, вот это тема — приоритет селекторов в CSS! Ну, блядь, это ж как в очереди за колбасой в девяностые: кто круче нагнёт, тот и получит свой стиль, а остальные смотрят, как их правила в помойку летят.
Вот смотри, как это работает, на самом деле всё просто, как три копейки, но иногда мозг ебёт.
На самом верху этой пирамиды, как главный пахан, сидит !important. Это такой крикливый мудак, который орет громче всех: «ВСЁ, БЛЯДЬ, ПО-МОЕМУ БУДЕТ!». Но с ним, сука, осторожно — если все начнут орать !important, получится пиздец, а не код.
Прямо под ним — инлайн-стили, вот это style="..." прямо в теге. Это как будто ты самому элементу в ухо шепчешь: «Слушай сюда, чувак, красишься в красный, и никого не слушай». У него вес овердохуищный.
Дальше идёт ID (#element). Ну, это как паспорт, блядь, уникальный. Один такой на всю страницу. Кто с ID пришёл — тот и прав. Вес у него серьёзный.
Потом — классы, атрибуты и псевдоклассы (типа .class, :hover). Это уже как пропуск на работу — у многих есть, но всё равно уважают.
И в самом низу, как разнорабочие, — сами теги и псевдоэлементы (div, ::before). Их все имеют, поэтому их мнение последнее, если только сверху не наехали.
А теперь, сука, самое смешное — специфичность. Это когда они начинают мериться, у кого «вес» больше. Считается, блядь, как очки: ID — сотня, класс — десятка, тег — единичка.
Смотри на пример, который ты привёл:
#header .menu li { color: red; } /* Считаем: 1 ID, 1 класс, 1 тег = 1-1-1, или 111 */
.menu li.active { color: blue; } /* А тут: 0 ID, 2 класса, 1 тег = 0-2-1, или 021 */Ну и кто круче? Первый, ёпта! У него 111 против 021. Вот и весь сказ. Красный цвет победил, синий — в пизду.
А если вес одинаковый? Тогда, блядь, работает правило «кто последний, тот и прав» — побеждает то правило, которое в коде ниже объявлено. Как в жизни: кто позже пришёл, того и тапки.
Короче, вся эта система чтобы не было бардака, а то начнёшь стили писать, а они друг друга перебивают, и получается ебаный цирк, а не вёрстка. Держи это в голове, и будет тебе счастье, а не пиздец.