Comment déterminer la priorité du sélecteur CSS ?

Spécificité et priorité du sélecteur CSS

Lorsque plusieurs sélecteurs CSS s'appliquent à un seul élément, le navigateur doit déterminer quel sélecteur est prioritaire. C'est ce qu'on appelle la spécificité du sélecteur.

Règles pour déterminer la spécificité du sélecteur :

1. ! remplacement des styles importants et en ligne :

   • Les styles déclarés avec le drapeau !important ou en ligne à l'aide de l'attribut style ont la priorité la plus élevée.

2. Spécificité :

   • La spécificité d'un sélecteur est déterminée par le nombre et le type de ses composants :

     • #id a une spécificité plus élevée que .classname
     • .classname a une spécificité plus élevée que tagname

3. La dernière règle prévaut :

   • Si deux sélecteurs ont la même spécificité, celui déclaré en dernier dans le fichier CSS est prioritaire.

Exemple :

Considérez les règles CSS suivantes :

<code class="css">body { font-size: 14px; }
#header { font-size: 16px; }</code>

Pour le

élément dans le , les deux règles s'appliquent. Cependant, étant donné que le sélecteur #header a une spécificité plus élevée (#id > tagname), sa valeur de taille de police de 16 px sera appliquée au

élément.

Remarque :

Il n'est pas rare d'avoir plusieurs règles ciblant le même élément avec différents niveaux de spécificité. Cela peut être utilisé pour affiner les styles pour des cas spécifiques ou remplacer les règles globales pour des instances spécifiques.

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!