Comment les sélecteurs CSS déterminent-ils la priorité ?

Priorité du sélecteur CSS

Lors du style d'un élément HTML avec CSS, plusieurs sélecteurs peuvent être applicables. Dans de tels scénarios, le navigateur suit des règles spécifiques pour déterminer quel sélecteur est prioritaire. Cet article explore les priorités parmi les sélecteurs CSS.

Spécificité

La spécificité d'un sélecteur détermine sa préséance sur les autres. La spécificité est calculée en fonction des critères suivants :

• Règles de style en ligne (les plus élevées) : Styles définis dans l'attribut de style de l'élément HTML.
• ID Sélecteur (élevé) : Sélectionne un élément par son identifiant unique.
• Sélecteur de classe (moyen) : Sélectionne des éléments avec une classe spécifique.
• Sélecteur d'éléments (faible) : Sélectionne les éléments par leur nom de balise HTML.

Calcul de la spécificité

La spécificité est calculée en attribuant des valeurs numériques comme suit :

• Règle de style en ligne : 1000
• Sélecteur d'ID : 100
• Sélecteur de classe : 10
• Sélecteur d'élément : 1

En additionnant les valeurs pour chaque critère pertinent, la spécificité est déterminée.

Précédence

En fonction de la spécificité, les règles de préséance suivantes s'appliquent :

• !Règles importantes et règles de style en ligne : Ces sélecteurs ont la priorité la plus élevée.
• Spécificité : Si deux sélecteurs ont des spécificités différentes, la règle avec plus la spécificité est élevée, plus elle l’emporte. Par exemple, un sélecteur d'ID (#id) a une priorité plus élevée qu'un sélecteur de classe (.classname).
• Ordre de déclaration : Si plusieurs sélecteurs ont la même spécificité, la règle déclarée ultérieurement dans le fichier CSS est prioritaire.

Exemple

Considérez les règles CSS suivantes :

<code class="css">p {
  color: red;
}

#content p {
  color: blue;
}</code>

Dans cet exemple, le # Le sélecteur de contenu p a une spécificité plus élevée que le sélecteur p car il comprend un sélecteur d'ID. Par conséquent, pour tous les éléments de l'élément #content, la propriété color sera définie sur bleu, remplaçant la couleur rouge par défaut.

Comprendre les priorités parmi les sélecteurs CSS est crucial lors de la création ou du débogage de code CSS complexe. En respectant ces règles, vous pouvez vous assurer que les styles souhaités sont appliqués aux éléments appropriés.

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!