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

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

1. Специфичност — това е тежестта на селектора, която се изчислява въз основа на броя на ID, класове, тагове и други компоненти. Колкото по-висока е специфичността, толкова по-голям е приоритетът на стила.

   • ID селектор (#id) има висок приоритет.
   • Класове (.клас), атрибути и псевдокласове имат среден приоритет.
   • Тагове (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.