Comment définir la priorité en CSS (règles de poids)

1. Qu'est-ce que la priorité de définition CSS ?

CSS (Cascading Style Sheets), feuilles de style en cascade, utilisées pour ajouter des styles aux pages Web. Cependant, lorsque plusieurs règles CSS stylisent le même élément, il y aura un problème de priorité de style. La définition des priorités CSS est la solution à ce problème.

En CSS, chaque règle a un certain poids. Les règles avec un poids élevé remplaceront les règles avec un poids faible, obtenant ainsi la priorité du style. La priorité de définition CSS implique quatre facteurs : l'ordre des sélecteurs, des classes, des identifiants et des styles.

2. Règles de poids pour la définition des priorités CSS

1. Poids des sélecteurs

En CSS, les sélecteurs sont divisés en sélecteurs d'éléments, sélecteurs de classe et sélecteurs d'ID. En cas de conflit de style, le poids des sélecteurs augmente dans l'ordre suivant :

Sélecteur d'élément (1)
Sélecteur de classe (10)
Sélecteur d'ID (100)

2. Poids des classes et attributs

Classes et attributs Le le poids de est le même que le poids du sélecteur. Lorsque les styles sont en conflit, ils déterminent également la priorité selon les règles croissantes ci-dessus.

3. L'ordre des styles

En cas de conflit de styles, les styles définis ultérieurement remplaceront les styles définis précédemment. Par conséquent, si des styles sont définis avec le même poids, le dernier style défini remplacera le précédent.

4.!mot-clé important

En CSS, le mot-clé !important permet à la définition de style d'avoir le poids le plus élevé, remplaçant les autres définitions quel que soit le sélecteur, la classe, l'ID ou l'ordre. Cependant, cette méthode doit être évitée autant que possible car elle détruirait l’héritage et la lisibilité du style.

3. Exemples de priorité de paramétrage CSS

Afin de mieux comprendre la priorité de paramétrage CSS, voici quelques exemples :

1 Priorité du sélecteur

Les règles de style suivantes seront appliquées en premier aux éléments div :

div{.

font-size: 22px;
color: red;

}
/sélecteur d'élément/
p{

font-size: 18px;
color: blue;

}
/sélecteur d'élément/
.container div{

font-size: 14px;
color: green;

}
/sélecteur de classe/
.class1 {

font-size: 24px;
color: yellow;

}
/ID selector/

id1{

font-size: 28px;
color: purple;

}

2. Le style défini ultérieurement a une priorité plus élevée

Dans les règles de style suivantes, la couleur définie ultérieurement a une priorité plus élevée :

p{

color: red;

}
p{

color: blue;

}

3.!important a la priorité la plus élevée

Parmi les règles de style suivantes, la couleur : jaune ; a la priorité la plus élevée et sera appliquée en premier à l'élément p :

p {

color: red!important;
font-size: 18px;
color: blue;

}
p{

color: yellow;

}

IV. Résumé

La définition de la priorité CSS a été introduite pour résoudre le problème des conflits de style. En cas de conflit de style, l'ordre des sélecteurs, des classes, des ID et des styles affectera tous la priorité. Comprendre les règles de définition des priorités en CSS peut mieux résoudre les problèmes de style et améliorer l'efficacité du développement.

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!