A propos des conflits entre règles CSS

Lorsque vous appliquez plusieurs règles CSS au même texte, un conflit risque de se produire et entraîner des résultats inattendus. Les navigateurs appliquent les règles CSS comme suit :

• Si deux règles sont appliquées au même texte, le navigateur affiche tous les attributs des deux règles, sauf en cas de conflit entre deux attributs spécifiques. Par exemple, une règle peut spécifier le bleu comme couleur du texte, alors que l'autre demandera le rouge.
• Lorsque des attributs de deux règles appliquées au même texte entrent en conflit, le navigateur choisit celui de la règle en aval, c'est-à-dire celle qui est la plus près du texte lui-même. Ainsi, si un élément de texte est régi par une feuille de style externe et par un style en ligne, ce dernier est appliqué.
• En cas de conflit direct, les attributs des règles CSS personnalisées (appliquées avec l'attribut class) sont prépondérants sur les attributs de styles des balises HTML.

Dans l'exemple qui suit, le style défini pour h1 peut spécifier la police, la taille et la couleur de tous les paragraphes h1, mais la règle CSS personnalisée .Blue appliquée à ce paragraphe est prépondérante sur la valeur de couleur déclarée dans le style h1. La seconde règle CSS personnalisée .Red l'emporte à son tour sur le style .Blue, car elle se trouve à l'intérieur du style .Blue.

<h1><span class="Blue">This paragraph is controlled by the .Blue custom style and h1
HTML tag style.<span class="Red">Except this sentence is controlled by the .Red style.</span>
Now we're back to the .Blue style.</span></h1>