Analyse du mécanisme de cascade en CSS

Cet article présente principalement des informations pertinentes sur le mécanisme de cascade CSS. Le mécanisme de cascade peut résoudre les conflits de style entre l'auteur (la personne qui écrit le code), l'utilisateur (la personne qui parcourt la page) et l'agent utilisateur ( fait généralement référence au navigateur). Maintenant, je le partage avec vous et le donne comme référence.

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 Dans le attribut de style de l'élément, a compte pour 1 ;

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

(3) c est égal au nombre dans le sélecteur La somme de la somme de tous les sélecteurs de classe, sélecteurs d'attributs et sélecteurs de pseudo-classe

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

a-b-c-d est la spécificité du sélecteur. L'ordre de comparaison commence par un premier. Celui qui est le plus grand 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 le sélecteur universel (*) a une spécificité de 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*/
style="" /*特异度=1，0，0，0*/

Ce qui précède est tout le contenu de cet article, J'espère que cela sera utile à tout le monde. Utile, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

Analyse des problèmes de pourcentage en CSS

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!