Explication détaillée de l'utilisation du mécanisme de cascade CSS

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du mécanisme de cascade CSS. Quelles sont les précautions d'utilisation du mécanisme de cascade CSS. Voici un cas pratique, jetons un oeil.

Pourquoi y a-t-il un mécanisme en cascade en CSS

Parce qu'il peut y avoir plusieurs styles en CSS qui affectent un certain attribut du même élément ? en même temps, le mécanisme en cascade peut résoudre les conflits de style entre les auteurs (les personnes qui écrivent du code), les utilisateurs (les personnes qui parcourent les pages) et les agents utilisateurs (généralement appelés navigateurs).

Chaque règle de style dans la cascade a une valeur de poids Lorsque plusieurs règles prennent effet en même temps, la règle avec le poids le plus élevé est prioritaire. De manière générale, la valeur de poids de style spécifiée par l'auteur est supérieure à la valeur de poids de style utilisateur, et la valeur de poids de style utilisateur est supérieure à la valeur de poids du client (agent utilisateur). Valeur générale du poids et objet, s'il y en a ! important, la spécificité est liée au poste. Dans l'ordre en cascade, les valeurs de poids suivantes vont de petite à grande

(1) Style de l'agent utilisateur

(2) Style général de l'utilisateur

(3) Auteur style général

(4) Style important de l'auteur (!important)

(5) Style important de l'utilisateur (!important)

(6) Si deux styles proviennent du même code, comme les deux De l'auteur (code), et leurs déclarations de style sont tout aussi importantes, elles sont calculées en fonction de la spécificité Celui avec une spécificité élevée couvrira le

avec une faible spécificité (7) Si le. la spécificité est également la même, plus on est en arrière, plus la priorité du style est élevée

Pourquoi les styles importants définis par les utilisateurs ont-ils une priorité plus élevée que les styles importants de l'auteur La raison en est de faciliter ? les utilisateurs doivent mettre en œuvre certaines exigences particulières, telles que l'ajustement de la taille de la police de la page, etc.

Calcul de la spécificité du sélecteur

(1) Si une déclaration apparaît dans l'attribut style d'un élément, alors un Compté comme 1;

(2) b est égal à la somme de tous les sélecteurs d'ID dans le sélecteur et

(3) c est égal à tous les sélecteurs de classe et d'attribut dans le sélecteur, Et le somme du nombre total de sélecteurs de pseudo-classe

(4) d est égal à la somme du nombre total de tous les sélecteurs d'étiquettes et sélecteurs de pseudo-éléments dans le sélecteur

a-b-c-d est le Spécificité du sélecteur, l'ordre de comparaison part d'un premier, et celui qui est le plus grand en premier aura une priorité plus élevée.

Remarque :

1. l'héritage a la priorité la plus basse et n'a aucune spécificité

2. combinant des caractères (tels que +, > ) Et la spécificité du sélecteur universel (*) est 0

.box{} /*特异度=0，0，1，0*/
.box p{} /*特异度=0，0，1，1*/
#nav li{} /*特异度=0，1，0，1*/
p:first-line{} /*特异度=0，0，0，2*/
 /*特异度=1，0，0，0*/

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Analyse détaillée du chargement du style Webpack

20 précautions d'utilisation du code CSS dans les projets pratiques front-end

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!