Duas regras miram o mesmo elemento e definem a mesma propriedade. Como o navegador decide qual vence?

O navegador resolve nesta ordem: origem e importância primeiro, depois cascade layers, depois especificidade, depois ordem no documento. Estilos inline vencem regras normais do autor, e uma declaração important inverte a ordem de origem, então uma regra important do usuário ou do user agent pode vencer uma regra important do autor. Dentro de uma layer, a especificidade conta id, depois classe, atributo e pseudo classe, depois seletores de elemento. Empates vão para a regra que vem por último.

Penso nisso como uma sequência de critérios de desempate. Primeiro o navegador olha origem e importância, então um estilo inline vence uma regra de folha de estilo e uma declaração important muda a ordenação inteira. Depois cascade layers, que é a parte que as pessoas esquecem: uma regra fora de layer vence qualquer coisa dentro de uma layer, por mais específica que a regra na layer seja, e layers posteriores vencem as anteriores. Só depois disso ele compara especificidade, e são três baldes, ids, depois classes, atributos e pseudo classes, depois seletores de elemento, comparados da esquerda para a direita, então um único id vence qualquer quantidade de classes. Se tudo empatar, vence o último na ordem do documento. Na prática eu uso layers para deixar isso sem graça. Coloco reset numa primeira layer, depois terceiros, depois componentes, e utilitários por último, então uma classe utilitária sempre vence sem precisar de important. O único lugar em que ainda uso important é uma regra genuinamente inegociável, normalmente algo dentro de uma folha de estilo de impressão.