poids des sélecteurs CSS

Les sélecteurs CSS totalisent un certain score pour définir leur priorité d'exécution, comprendre cette façon de compter les points vous évitera bien des soucis dans l'héritage des styles.

Dans l'ordre du plus prioritaire au moins important:

• les sélecteurs inline ( par exemple

  )

• les #id (

  )

• les .classes (

  )

• les (

  )

Votre navigateur, pour déterminer quel sélecteur doit avoir raison fait un tableau selon cet ordre.

inline | id | class | element0 | 0 | 0 | 0

Quand il rencontre un sélecteur il examine de quoi il s'agit. Par exemple si j'ai ce CSS:

#patate .douce.fraiche { color : red; }

.douce { color : blue;}

Le premier sélecteur comporte un ID et une classe. Il a donc ce nombre de points selon le tableau vu ci dessus: 0 | 1 | 2 | 0. C'est à dire 120 points.Le deuxième sélecteur aura juste 10 points.120 étant supérieur a 10, c'est le premier sélecteur qui aura la priorité pour repeindre.

Pour plusse de trucs et astuces sur le CSS, je vous conseille le site d'Alsacréations.com et openclassrooms.com.Enjoyez.