Dos reglas apuntan al mismo elemento y fijan la misma propiedad. ¿Cómo decide el navegador cuál gana?

El navegador lo resuelve por orden: primero origen e importancia, luego capas de cascada, luego especificidad, luego orden en el documento. Los estilos en línea ganan a las reglas normales de autor, y una declaración important invierte el orden de origen, de modo que una regla important de usuario o de agente de usuario puede ganar a una important de autor. Dentro de una capa, la especificidad cuenta id, luego clase, atributo y pseudoclase, luego selectores de elemento. Los empates los gana la regla que aparece más tarde.

Lo veo como una secuencia de desempates. Primero el navegador mira origen e importancia, así que un estilo en línea gana a una regla de hoja de estilos y una declaración important cambia el orden por completo. Luego las capas de cascada, que es la parte que la gente se salta: una regla sin capa gana a cualquier cosa dentro de una capa por muy específica que sea esa regla, y las capas posteriores ganan a las anteriores. Solo después compara especificidad, y eso son tres cubos, ids, luego clases, atributos y pseudoclases, luego selectores de elemento, comparados de izquierda a derecha, así que un solo id gana a cualquier cantidad de clases. Si todo empata, gana la última en orden de documento. En la práctica uso capas para volver esto aburrido. Pongo el reset en una primera capa, luego terceros, luego componentes y las utilidades al final, así una clase utilitaria siempre gana sin necesidad de important. El único sitio donde todavía uso important es para una regla realmente innegociable, normalmente algo dentro de una hoja de estilos de impresión.