Priorités entre classes et code propre

Bonsoir,

l'ordre de priorité du plus important au moins important en CSS donne ceci il me semble :
- style inline via l'attribut HTML style,
- ID,
- classe,
- balise
- pseudo classe

Maintenant, je me demande comment écrire proprement du CSS, sur le cas suivant, j'ai une div initiale qui à un fond blanc ce qui donne :

Code:

---

1 2 3 4 5

.blanc { background-color: white; }

---

Sur un bout de div, j'ajoute une autre classe qui a notament un attribut background-color: green;

Comment le navigateur détermine quelle valeur à plus d'importance et comment éviter d'avoir recours à !important pour obtenir le résultat attendu ?

:salut:

Citation:

---

l'ordre de priorité du plus important au moins important en CSS [...]

---

Au début, on trouve que les règles sont simples et en approfondissant on trouve que ce n'est pas si évident que cela à comprendre.

Voici deux liens à lire dans l'ordre :

1. Heritages et cascades Comment les styles CSS se combinent entre eux et se transmettent de balises en balises
2. COMPRENDRE LE POIDS DES RÈGLES CSS

@danielhagnoul
On a ça aussi sur DVP !

• Règles d'application des styles CSS et gestion des conflits

Il me semblait bien avoir vu quelque chose dans la maison DVP, mais hier je n'avais pas réussi à mettre la main-dessus. De plus, c'est de l'ami Didier, je suis impardonnable ! :pan: