L'ordre dans la source
Un article ayant la classe span.outer. Le texte de ce paragraphe est de couleur verte, c'est le selecteur span.outer p qui est appliqué.
Un paragraphe ayant la classe span.inner. Le texte de ce paragraphe est de couleur verte, c'est le selecteur span.outer p qui est appliqué car il est écrit après le sélecteur article span.inner dans la source. Les deux sélécteurs ayant la même spécificité (1 classe + 1 élément), c'est l'ordre dans la source qui compte.
La spécificité
Un article ayant la classe span.alice. Le texte de ce paragraphe est de couleur bleue, c'est le selecteur span.alice p qui est appliqué car il possède la plus grande spécificité (1 classe + 1 élément), supérieure à span.alice (1 classe).
Un paragraphe ayant la classe span.bob. Le texte de ce paragraphe est de couleur rouge orangé, c'est le selecteur .alice .bob qui est appliqué car il possède la plus grande spécificité (2 classes), supérieure à p.bob (1 classe + 1 élément) et à .bob (1 classe).
L'importance
Un article ayant la classe .base
Un paragraphe ayant la classe span.important. Le texte de ce paragraphe est de couleur rouge, c'est la propriété color: red du selecteur span.important qui est appliqué car il y a la déclaration !important.