Qual seletor CSS tem prioridade?

Em CSS, a prioridade de um seletor é determinada pela sua especificidade e pela ordem em que os estilos são declarados.

A especificidade é uma medida que determina o peso de um seletor em relação aos outros. Quando dois ou mais seletores correspondem ao mesmo elemento, o seletor com maior especificidade terá prioridade.

A especificidade é calculada com base nos seguintes critérios:

1. Seletor de ID: cada ocorrência de um seletor de ID no estilo é contado (por exemplo, #meu-elemento).
2. Seletor de classe, atributo ou seletor de pseudoclasse: cada ocorrência de um seletor de classe, atributo ou pseudoclasse é contado (por exemplo, .minha-classe ou [meu-atributo]).
3. Seletor de elemento ou seletor de pseudoelemento: cada ocorrência de um seletor de elemento ou pseudoelemento é contado (por exemplo, div ou ::after).

Quanto maior o número de ocorrências de cada tipo de seletor, maior será a especificidade. Em caso de empate, a ordem em que os estilos são declarados no CSS determinará qual terá prioridade.

Por exemplo, considere a seguinte regra CSS:

#meu-elemento {
  color: red;
}

.minha-classe {
  color: blue;
}

div {
  color: green;
}

Se um elemento tiver o ID “meu-elemento” e também tiver a classe “minha-classe”, o estilo definido pelo seletor de ID terá prioridade, pois possui maior especificidade. Mas se a ordem das declarações for alterada no CSS, o estilo definido pelo seletor de classe terá prioridade.

É importante entender a prioridade dos seletores CSS para evitar conflitos e garantir que os estilos sejam aplicados corretamente aos elementos desejados.