As respostas presentes já endereçam bem o assunto, venho apenas complementar as existentes com algumas notas.
Sumário
A prioridade das propriedades de CSS num elemento são tratadas da seguinte forma:
Prevalecem as propriedades com a expressão !important
, depois as que estão atribuídas no id
que não tenham sido subscritas pela expressão e por último as atribuídas em class
(s) que não tenham sido subscritas pela expressão ou pelo id
.
A exemplificar
Em CSS, a regra é que o id
é um seletor que tem que ser único na página, muito devido às suas aplicações em JavaScript, motivos os quais facultam ao mesmo uma precedência sobre qualquer class
presente no mesmo elemento bem como estilos aplicados diretamente na tag desse elemento.
No entanto, convém advertir que a expressão !important
existe para tornar um valor da respetiva propriedade de CSS mais importante que todos os outros, isto independentemente de id
ou class
:
div{ /* estilo na tag */
color:green;
}
.blue{ /* estilo via class */
color:blue;
}
#red{ /* estilo via id */
color:red;
}
.grey{ /* estilo expresso como IMPORTANTE */
color:grey!important;
}
<div>A minha cor via TAG</div>
<div class="blue">A minha cor via CLASS</div>
<div id="red">A minha cor via ID</div>
<div id="red" class="blue">A minha cor via ID + CLASS</div>
<div id="red" class="blue grey">A minha cor via ID + CLASS + !important</div>
<div id="red" class="grey blue">A minha cor via ID + !important + CLASS</div>
De notar que a Mozilla Developer Network considera o uso de !important
má prática:
Usando !important
é uma prática ruim porque torna a depuração difícil, pois você quebrar a cascata natural em suas folhas de estilo.
Combinações
Podemos ainda completar a resposta com a questão das combinações de seletores.
Ao atribuirmos propriedades de CSS a um elemento, podemos atribuir as mesmas via class
, id
, tag
, mas também com uma combinação.
Fica um exemplo de uma combinação com id
+ class
que prevalece sobre as regras supra citadas, mas não prevalece sobre a expressão !important
:
div{ /* estilo na tag */
color:green;
}
.blue{ /* estilo via class */
color:blue;
}
#red{ /* estilo via id */
color:red;
}
.grey{ /* estilo expresso como IMPORTANTE */
color:grey!important;
}
#red.bubu { /* combinação prevalece sobre as regras de ID */
color:black; /* ou class com excepção do que tem a expressão IMPORTANTE */
}
<div>A minha cor via TAG</div>
<div class="blue">A minha cor via CLASS</div>
<div id="red">A minha cor via ID</div>
<div id="red" class="blue">A minha cor via ID + CLASS</div>
<div id="red" class="blue grey">A minha cor via ID + CLASS + !important</div>
<div id="red" class="grey blue">A minha cor via ID + !important + CLASS</div>
<div id="red" class="blue bubu">
<small>A minha cor via ID + CLASS deveria dar vermelho, mas foi subscrito pela combinação "#red.bubu" para preto.</small>
</div>
Desambiguação sobre uso do id
Fiquei com a ideia que o conceito geral é que: "um id
não deve ser utilizado para estilos", tal conceito deve ser considerado incorreto e passo a comprovar:
O uso do id
para estilos em CSS é perfeitamente válido e tem por exemplo a mesma utilidade que o JavaScript lhe dá, ou seja, atingir um elemento especifico na página.
Se os estilos no id
não fossem válidos, porque teria a W3C perdido tempo a implementar centenas de regras que trazem inúmeros trabalhos aos navegadores que as implementam e aos programadores que as tem que conhecer?
E a resposta pode ser encontrada na documentação:
O atributo id
tem vários papéis em HTML:
Como um seletor de folha de estilo.
Como uma âncora de destino para links de hipertexto.
Como forma de fazer referência a um elemento particular de um script.
Como o nome de um elemento OBJECT
declarado.
Para o processamento de propósito geral por agentes do usuário (por exemplo, para a identificação de campos quando extrair dados de páginas HTML em um banco de dados, tradução de documentos HTML para outros formatos, etc.).