Как в CSS работают различные приоритеты стилей?

В CSS приоритеты стилей определяются с помощью механизма каскада и специфичности селекторов. Основные принципы:

1. Специфичность — это вес селектора, который вычисляется на основе количества ID, классов, тегов и других компонентов. Чем выше специфичность, тем приоритетнее стиль.

   • ID-селектор (#id) имеет высокий приоритет.
   • Классы (.class), атрибуты и псевдоклассы имеют средний приоритет.
   • Теги (div, p) — низкий.

2. Каскад — если два правила имеют одинаковую специфичность, то применяется то, которое объявлено позже в коде.

3. !important — добавляет максимальный приоритет к стилю, переопределяя другие правила, кроме других !important с более высокой специфичностью.

4. Наследование — некоторые свойства (например, color, font-family) наследуются от родителя, если не переопределены.

Пример:

#header { color: red; }       /* специфичность 100 */
.menu { color: blue; }        /* специфичность 10  */
div { color: green; }         /* специфичность 1   */

/* Если элемент имеет id="header" и класс="menu", цвет будет красный */

Таким образом, браузер выбирает стиль с наибольшей специфичностью, учитывая порядок и наличие !important.