Avant-propos :

Dans les articles précédents, nous avons introduit un grand nombre de sélecteurs, donc lorsqu'un grand nombre de sélecteurs sont utilisés, ils doivent avoir un ordre de priorité.Par conséquent, dans cet article, nous présenterons en détail la relation de priorité entre chaque sélecteur.

Priorité des sélecteurs communs (du plus élevé au plus bas)

1. Styles en ligne :
- Le sélecteur de priorité la plus élevée.
- En définissant les styles directement dans l'attribut style de l'élément HTML.
- exemple de code :

<div style="color: red;">This is a div with inline style.</div>

2. Sélecteurs d'ID (ID selectors) :
- Sélectionnez en ajoutant l'attribut id à l'élément et en utilisant le symbole #.
- exemple de code :

#myDiv
{
color: blue;
}

<div id="myDiv">This is a div with ID selector.</div>

3. Sélecteurs de classe (Class selectors) :
- En ajoutant l'attribut class à l'élément et en utilisant le symbole .pour sélectionner.
- exemple de code :

    .myClass {
       color: green;
     }

     <div class="myClass">This is a div with class selector.</div>

4. Sélecteurs d'attributs :
- Sélectionnez par attributs d'élément.
- exemple de code :

 input[type="text"]
 {
   border: 1px solid gray;
 }

<input type="text" />

5. Sélecteurs de pseudo-classe :
- Sélection par état spécial de l'élément.
- exemple de code :

<a href="#">This is a link.</a>
 a:hover 
{
 text-decoration: underline;
 }

6. Sélecteurs d'éléments :
- Sélectionnez par nom de balise d'élément.
- exemple de code :

<h1>This is a heading.</h1>

h1 
{
font-size: 24px;
}

Dans une feuille de style, si plusieurs sélecteurs sont appliqués au même élément, les styles des sélecteurs de priorité supérieure remplaceront les styles des sélecteurs de priorité inférieure. L'application correcte des styles peut être assurée par une utilisation judicieuse des sélecteurs.

Poids du sélecteur :

Le poids d'un sélecteur CSS est une valeur utilisée pour déterminer la priorité du sélecteur, qui détermine les règles de style du sélecteur qui sont appliquées lorsque plusieurs sélecteurs sont appliqués au même élément.

Les poids des sélecteurs CSS peuvent être calculés selon les règles suivantes :

1. Les styles en ligne ont un poids de 1000 . Les styles en ligne sont des règles de style définies directement dans l'attribut `style` d'un élément.

2. Le sélecteur d'ID a un poids de 100 . Les sélecteurs d'ID sont représentés par `#`, comme `#myElement`.

3. Les sélecteurs de classe, les sélecteurs d'attribut et les sélecteurs de pseudo-classe ont un poids de 10. Les sélecteurs de classe sont représentés par `.`, les sélecteurs d'attribut sont représentés par `[]` et les sélecteurs de pseudo-classe sont représentés par `:`.

4. Les sélecteurs d'étiquettes et les sélecteurs de pseudo-éléments ont un poids de 1. Un sélecteur de balises est un sélecteur exprimé directement à l'aide de noms de balises HTML, tels que `div`, `p`, `a`. Les sélecteurs de pseudo-éléments sont représentés par `::`, comme ::before, ::after.

Lorsque plusieurs sélecteurs sont appliqués au même élément, le moteur CSS compare les poids des sélecteurs et applique d'abord les règles de style avec des poids plus élevés. Pour les sélecteurs ayant le même poids, les règles de style définies ultérieurement remplaceront les règles de style définies précédemment.

Il convient de noter que le calcul du poids est indépendant et n'est pas affecté par la position spécifique du sélecteur ou l'ordre de la déclaration de style. Autrement dit, quelle que soit la feuille de style dans laquelle se trouve le sélecteur ou l'ordre des règles de style, le calcul du poids est effectué en fonction du sélecteur lui-même.

Si une déclaration d'importance « !important » est utilisée dans le calcul du poids , cette règle de style aura la priorité la plus élevée, quels que soient les poids des autres sélecteurs.

En résumé, les poids des sélecteurs fournissent un mécanisme pour gérer et contrôler la priorité de style des différents sélecteurs lorsqu'ils sont appliqués aux éléments. L'utilisation judicieuse des pondérations des sélecteurs garantit une application correcte et une dérogation aux règles de style.

Cas de calcul :

En CSS, plusieurs sélecteurs peuvent être combinés à l'aide de virgules pour former un sélecteur composé. Lorsque vous utilisez des sélecteurs composés, chaque sélecteur calcule son poids individuellement et le poids final est la somme de tous les poids des sélecteurs.

Pour les sélecteurs composés (a, b, c), les poids de chaque sélecteur seront calculés séparément puis additionnés pour obtenir le poids final.

Par exemple, pour le sélecteur `div.container, .myClass, #myId`, nous calculerons le poids comme suit :

Pour le sélecteur `div.container`, il se compose d'un sélecteur d'étiquette et d'un sélecteur de classe. Les sélecteurs d'étiquette ont un poids de 1, tandis que les sélecteurs de classe ont un poids de 10. Par conséquent, `div.container` a un poids de 1 + 10 = 11.
Pour le sélecteur `.myClass`, il n'a qu'un seul sélecteur de classe avec un poids de 10.
Pour le sélecteur `#myId`, il n'a qu'un seul sélecteur d'ID avec un poids de 100.
Enfin, additionnez les poids des trois sélecteurs : 11 + 10 + 100 = 121.

Par conséquent, la combinaison de sélecteurs `(div.container, .myClass, #myId)` a un poids de 121.

Certains (a, b, c) enregistreront aussi directement le nombre de sélecteurs en cours, par exemple :

Il serait bon de comparer directement le nombre de chaque bit lors de la comparaison, mais en fait c'est la même chose que nous avons introduite, et après avoir écrit un sélecteur, le compilateur nous informera également du poids du sélecteur actuel.

Lors de l'application des règles de style, la règle de style du sélecteur avec le poids le plus élevé sera appliquée à l'élément. Si plusieurs sélecteurs ont le même poids le plus élevé, la règle de style définie en dernier prévaudra.

Il convient de noter que le calcul du poids suit les règles de priorité du sélecteur, parmi lesquelles le sélecteur d'ID a le poids le plus élevé, suivi du sélecteur de classe et du sélecteur d'attribut, et enfin du sélecteur d'étiquette. Par conséquent, lors du calcul du poids d'un sélecteur composite, il doit être calculé à partir des poids des sélecteurs individuels et additionnés.

Résumer:

Dans cet article, nous avons présenté en détail la priorité et la méthode de calcul du sélecteur.Lorsque nous écrirons des projets frontaux à grande échelle à l'avenir, nous ajusterons fréquemment la priorité du sélecteur pour obtenir le style dont nous avons besoin, nous devons donc bien maîtriser ce chapitre.

Si mon contenu vous est utile, n'hésitez pas à aimer, commenter et mettre en signet . La création n'est pas facile, le soutien de chacun est ma motivation pour persévérer !

[Apprendre le CSS à partir de zéro | Partie 3] Priorité du sélecteur

Avant-propos :

Priorité des sélecteurs communs (du plus élevé au plus bas)

Poids du sélecteur :

Résumer:

Je suppose que tu aimes