Petit conseil Comprendre la spécificité CSS

Le "C" en CSS signifie en cascade. Cela signifie que les règles de style qui apparaissent plus tard dans la feuille de style remplacent les règles qui apparaissent plus tôt. Mais ce n'est pas toujours le cas. Vous devez également prendre en considération un autre élément: la spécificité. Dans cette astuce, je vais vous montrer comment faire exactement cela.

Règles de spécificité

La spécificité CSS est fondamentalement la suivante: plus votre sélecteur est spécifique, plus il a de la priorité. Pour déterminer quels sélecteurs valent plus, utilisez ce système:

• Donnez 1 point à chaque sélecteur d'élément HTML. Exemple: p
• Donnez 10 points à chaque sélecteur de classe. Exemple: .column
• Donnez à chaque sélecteur d'ID 100 points. Exemple: #wrap
• Additionnez les points pour chaque morceau du sélecteur pour obtenir la valeur complète du sélecteur.

Par exemple

 #test background: red;  / * spécificité: 100 * / .item p background: green;  / * spécificité: 10 + 1 = 11 * / p fond: orange;  / * spécificité: 1 * / body #wrap p fond: jaune;  / * spécificité: 1 + 100 + 1 = 102 * /