Comment fonctionnent les différentes priorités des styles en CSS?

En CSS, les priorités des styles sont déterminées par le mécanisme de cascadage et la spécificité des sélecteurs. Les principes principaux sont :

1. Spécificité — c'est le poids du sélecteur, calculé en fonction du nombre d'ID, de classes, de balises et d'autres composants. Plus la spécificité est élevée, plus le style a de priorité.

   • Le sélecteur d'ID (#id) a une priorité élevée.
   • Les classes (.classe), attributs et pseudoclasses ont une priorité moyenne.
   • Les balises (div, p) ont une priorité faible.

2. Cascadage — si deux règles ont la même spécificité, celle déclarée plus tard dans le code est appliquée.

3. !important — ajoute une priorité maximale au style, écrasant d'autres règles, sauf d'autres !important avec une spécificité plus élevée.

4. Héritage — certaines propriétés (par exemple, color, font-family) sont héritées du parent si elles ne sont pas redéfinies.

Exemple :

#header { color: red; }       /* spécificité 100 */
.menu { color: blue; }        /* spécificité 10  */
div { color: green; }         /* spécificité 1   */

/* Si un élément a l'id="header" et la classe="menu", la couleur sera rouge */

Ainsi, le navigateur choisit le style avec la spécificité la plus élevée, en tenant compte de l'ordre et de la présence de !important.