La spécificité CSS expliquée : comment contrôler quels styles gagnent

Avez-vous déjà passé des heures à peaufiner votre CSS, en vous demandant pourquoi ce style obstiné ne s'appliquerait pas ? Bienvenue dans le monde de la spécificité.

La spécificité est la manière dont les navigateurs décident quelle règle CSS appliquer lorsque plusieurs règles ciblent le même élément. Sans le comprendre, vos feuilles de style peuvent rapidement se transformer en un véritable désordre. Décomposons-le.

La hiérarchie des spécificités

1. Sélecteur universel : le concurrent du point zéro

Le sélecteur universel (*) est en bas de la chaîne de spécificité avec 0 point. C’est comme une règle générale pour tout, mais elle est remplacée par presque tout le reste.

Exemple :

* {
  color: red;
}
h1 {
  color: blue;
}

Même avec * { couleur : rouge ; }, un

sera bleu car le sélecteur d'élément gagne.

2. Sélecteur d'éléments : 1 point de spécificité

Les sélecteurs d'éléments (h1, p, div) sont plus puissants que les sélecteurs universels, portant 1 point.

Exemple :

h1 {
  color: green;
}

Cette règle remplacera un sélecteur universel ciblant le même élément.

3. Sélecteur de classe, pseudo-classe ou attribut : 10 points

Les sélecteurs comme .button, :hover ou [type="text"] sont plus spécifiques, avec 10 points.

Exemple :

.button {
  color: purple;
}

Cela remplacera les sélecteurs universels et d'éléments.

4. Sélecteur d'identification : 100 points

Les identifiants (#submitButton) sont nettement plus puissants, avec 100 points. Utilisez-les avec parcimonie, car ils peuvent rendre les styles plus difficiles à gérer.

Exemple :

#submitButton {
  background-color: yellow;
}

5. Styles en ligne : 1 000 points – Le poids lourd

Les styles en ligne l'emportent sur tout sauf !important.

Exemple :

<div>



<h4>
  
  
  6. The Almighty !important
</h4>

<p>Adding !important forces a rule to override others, even inline styles. But overusing it can lead to chaos in your CSS. It can be necessary when using third-party libraries to help override predefined styles.</p>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.button {
  color: red !important;
}

Quand la spécificité est liée, l’ordre compte

Si deux règles ont la même spécificité, celle qui arrive plus tard dans la feuille de style l'emporte.

Exemple :

h1 {
  color: red;
}
h1 {
  color: green;
}

Ici,

sera vert car la deuxième règle est plus tardive.

Récapitulatif des points de spécificité

• Sélecteur Universel (*) : 0 point
• Sélecteur d'élément (div, p) : 1 point
• Classe, pseudo-classe, sélecteurs d'attributs : 10 points
• Sélecteur d'ID (#id) : 100 points
• Styles en ligne : 1 000 points
• !important : remplace tout

La maîtrise de la spécificité vous permet d'écrire du CSS propre et maintenable, vous évitant ainsi un débogage sans fin. La prochaine fois que vos styles ne se comportent pas correctement, vous saurez exactement où chercher.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!