Deux règles ciblent le même élément et définissent la même propriété. Comment le navigateur décide-t-il laquelle l'emporte ?

Le navigateur résout dans cet ordre : origine et importance d'abord, puis les couches de cascade, puis la spécificité, puis l'ordre du document. Les styles inline passent devant les règles auteur normales, et une déclaration important inverse l'ordre des origines, donc une règle utilisateur ou user agent en important peut battre une règle auteur en important. Dans une même couche, la spécificité compte les id, puis les classes, attributs et pseudo classes, puis les sélecteurs d'élément. À égalité, c'est la règle qui vient en dernier qui gagne.

Je vois ça comme une suite de départages. D'abord le navigateur regarde l'origine et l'importance, donc un style inline bat une règle de feuille de style et une déclaration important change complètement l'ordre. Ensuite les couches de cascade, la partie que les gens oublient : une règle hors couche bat n'importe quoi dans une couche, quelle que soit la spécificité de la règle en couche, et les couches déclarées plus tard battent les précédentes. C'est seulement après ça qu'il compare la spécificité, et c'est trois compartiments, les id puis les classes, attributs et pseudo classes, puis les sélecteurs d'élément, comparés de gauche à droite, donc un seul id bat n'importe quel nombre de classes. Si tout est à égalité, la dernière dans l'ordre du document gagne. En pratique, j'utilise les couches pour rendre ça ennuyeux. Je mets le reset dans une première couche, puis le tiers, puis les composants, puis les utilitaires en dernier, comme ça une classe utilitaire gagne toujours sans avoir besoin d'important. Le seul endroit où j'utilise encore important, c'est pour une règle vraiment non négociable, en général quelque chose dans une feuille de style d'impression.