Il peut arriver que deux ou plusieurs déclarations s'appliquent au même élément. Il est également possible qu'il a un conflit entre elles. Lorsque de tels conflits arrivent, c'est la déclaration qui a le plus grand poids qui est utilisée. Alors, comment est déterminé le poids ?
Quand des documents sont chargés dans un navigateur, toutes les déclarations sont triées et un poids leur est donné. Elles sont ensuite appliqués à un document, cette application est basée sur ce poids. Il y a quatre étapes de tri. Le procédé est plutôt complexe, nous utiliserons un élément HTML (<h2>) comme exemple.
Après avoir regardé toutes les feuilles de style (navigateur, utilsiateur et auteur), toutes les déclarations qui concernent un élément <h2> sont trouvées.
La feuille de style navigateur peut inclure les règles suivantes :
h2 { font-size: 1.5em; margin: .83em 0; color: black }
La feuille de style utilisateur peut inclure la règle suivante :
h2 { color: brown !important; }
La feuille de style auteur peut inclure les règles suivantes :
h2 { color: green; font-size: 1.2em; padding: 10px; }
h2#principal { color: red; }
h2.navigation { color: blue; }
Les règles précédentes sont ainsi triés par poids et origine. Pour des déclarations normales, les feuilles de style de l'auteur ont priorité sur celles de l'utilisateur qui elles ont préséance sur celles du navigateur à moins qu'il y a une déclaration "!important" dans la feuille de style de l'utilisateur. Pour les déclarations "!important", les feuilles de style utilisateur ont priorité sur celles de l'auteur et du navigateur.
Pour les utilisateurs généraux, les éléments <h2> qui ne sont pas stylés spécifiquement avec "#principal" ou ".navigation" seront stylés avec :
font-size: 1.2em; /* l'auteur l'emporte sur le navigateur */
margin: .83em 0; /* spécifié uniquement par le navigateur */
padding: 10px; /* spécifié uniquement par l'auteur */
color: green; /* l'auteur l'emporte sur le navigateur */
Pour l'utilisateur qui a défini une règle "!important", les éléments <h2> qui ne sont pas stylés spécifiquement avec "#principal" ou ".navigation" seront stylés avec :
font-size: 1.2em; /* l'auteur l'emporte sur le navigateur */
margin: .83em 0; /* spécifié uniquement par le navigateur */
padding: 10px; ; /* spécifié uniquement par l'auteur */
color: brown; /* l'utilisateur l'emporte grâce à !important */
Même si on a trié le style général de <h2>, il peut encore y avoir un conflit dans d'autres zones du document. Que se passe-t'il avec un <h2> qui a été stylé avec "#principal" ?
Chaque sélecteur se voit donner une spécificité qui est calculé surle sélecteur en entier. Des sélecteurs plus spécifiques ont priorité sur des sélecteurs plus généraux. Le calxul est basé sur les règles suivantes (elles ont été simplifiées) :
Ces trois chiffres sont ensuite arrangés de la façon suivante : a-b-c. En utilisant les exemples suivants, les déclarations obtiennent les chiffres suivants :
h2 { font-size: 1.5em; margin: .83em 0; color: black }
0-0-1 > spécificité = 1
h2 { color: brown !important; }
0-0-1 > spécificité = 1
h2 { color: green; font-size: 1.2em; padding: 10px; }
0-0-1 > spécificité = 1
h2#principal { color: red; }
1-0-1 > spécificité = 101
h2.navigation { color: blue; }
0-1-1 > spécificité = 11
Cela signifie que "h2#principal" a le plus grand poids, suivi par "h2.navigation".
Pour les utilisateurs généraux (qui ne seront pas affectées par les règles utilisateurs "!important"), n'importe quel <h2> stylé avec id="principal" sera stylé avec :
color: red; /* l'id est spécifique que le sélecteur de type */
N'importe quel <h2> stylé avec class="navigation" sera stylé avec :
color: blue; /* la classe est plus spécifique que le sélecteur de type */
Si il y avait un conflit entre "#principal" et ".navigation", l'ID gagnerait et le <h2> serait stylé comme suit :
color: red; /* l'id est plus spécifique que le sélecteur de classe ou de type */
Si deux règles ont les même poids, origine et spécificité, celle écrite en dernier dans la feuille l'emporte. Les règles des feuilles de styles importées sont considérées... to be before any rules in the style sheet itself.
Par exemple, la feuille de style peut contenir deux règles identiques dans des sections différentes du document :
h2 { color: blue; }
h2 { color: green; }
La deuxième règle, qui apparaît plus loin dans la feuille de style, gagnerait.