La priorité des sélecteurs CSS !

Vous connaissez tous les sélecteurs, c’est ce qui permet de spécifier tel élément HTML à un autre et de lui faire appliquer des propriétés comme une position dans une page web ou sa couleur par exemple.
Mais que se passe-t-il si deux règles ciblent le même élément et lui appliquent des valeurs différentes sur une même propriété ? Du style une règle qui met une balise div en rouge et une autre règle qui le met en bleu. Le CSS donne la priorité à une règle en fonction de son poids ! Un poids ? Et bien, voyons ce qui fait qu’une règle est choisie au lieu d’une autre et ça n’a rien à voir avec les kilos qu’elle fait ! C’est parti !