Une lecture de droite à gauche des sélecteurs, par ex :
<a> <b> <c> { prop:value;}
L'user-agent va d'abord isoler les <c> dans le html, puis regarder lesquels sont enfants d'un <b>, et enfin parmi ceux-ci lesquels sont dans un <a>
S'il est possible de simplifier le sélecteur, le faire !
Les styles externes sont appliqués en premier, puis les styles “embedded”, et enfin les styles “inline”.
De manière générale, c'est le dernier style applicable qui est appliqué.
Un élément hérite des styles appliqués à ses parents. À noter que cela ne concerne pas toutes les propriétés.
selecteur | ID | classes | éléments | spécificité |
---|---|---|---|---|
body | 0 | 0 | 1 | 1 |
#mainContent | 1 | 0 | 0 | 100 |
quote | 0 | 1 | 0 | 10 |
div p | 0 | 0 | 2 | 2 |
#sidebar p | 1 | 0 | 1 | 101 |
Les styles peuvent se cumuler avec les déclarations.