Como funcionam as diferentes prioridades de estilos no CSS?

Em CSS, as prioridades de estilos são determinadas pelo mecanismo de cascata e pela especificidade dos seletores. Os princípios principais são:

1. Especificidade — é o peso do seletor, calculado com base na quantidade de ID, classes, tags e outros componentes. Quanto maior a especificidade, maior a prioridade do estilo.

   • O seletor de ID (#id) tem alta prioridade.
   • Classes (.classe), atributos e pseudoclasses têm prioridade média.
   • Tags (div, p) têm prioridade baixa.

2. Cascata — se duas regras têm a mesma especificidade, aplica-se aquela que é declarada mais tarde no código.

3. !important — adiciona prioridade máxima ao estilo, sobrescrevendo outras regras, exceto outras !important com maior especificidade.

4. Herança — algumas propriedades (por exemplo, color, font-family) são herdadas do elemento pai se não forem sobrescritas.

Exemplo:

#header { color: red; }       /* especificidade 100 */
.menu { color: blue; }        /* especificidade 10  */
div { color: green; }         /* especificidade 1   */

/* Se um elemento tem id="header" e classe="menu", a cor será vermelha */

Assim, o navegador escolhe o estilo com maior especificidade, considerando a ordem e a presença de !important.