Analyse sur le poids, la cascade et l'importance (!important) en CSS

Ce qui suit est une brève discussion sur l'importance des poids CSS et de la cascade (!important). Le contenu est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence.

1. Poids de spécificité

Parfois, nous définissons différents codes de style CSS pour le même élément, l'élément sera alors activé. Quel style CSS ? Jetons un coup d'œil au code suivant :

p{color:red;}   
.first{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

p et .first correspondent tous deux à la balise p, alors quelle couleur sera affichée ? le vert est la bonne couleur, alors pourquoi ? En effet, le navigateur détermine quel style CSS utiliser en fonction du poids et le style CSS avec le poids le plus élevé est utilisé.

Voici les règles de poids :

Le poids de l'étiquette est de 1, le poids du sélecteur de classe est de 10 et le poids du sélecteur d'identification est de jusqu'à 100. Par exemple, le code suivant :

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

Remarque : Il existe également un poids spécial - l'héritage a également un poids mais il est très faible. Certaines publications proposent qu'il ne soit que de 0,1. , c'est donc compréhensible. Le poids hérité est le plus bas.

2. Cascade

S'il peut y avoir plusieurs styles CSS pour le même élément dans le fichier html et quoi dois-je faire si ces plusieurs styles CSS ont la même valeur de poids ? Eh bien, la mise en cascade dans cette section vous aide à résoudre ce problème.

En cascade signifie qu'il peut y avoir plusieurs styles CSS pour le même élément dans le fichier html. Lorsqu'il y a des styles avec le même poids, cela sera déterminé en fonction de l'ordre de ces CSS. styles. Le dernier style CSS sera appliqué.

Comme le montre le code suivant :

p{color:red;}   
p{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

Enfin, le texte dans p sera défini sur vert. Cette cascade est facile à comprendre. Il est entendu que le style ultérieur sera écrasé. le style précédent.

La priorité de style CSS précédente n'est donc pas difficile à comprendre :

Feuille de style en ligne (à l'intérieur de la balise)> ; Feuille de style externe (dans un fichier externe) .

3. Importance

Lorsque nous créons du code de page Web, il existe des situations particulières dans lesquelles nous devons définir le poids le plus élevé pour certaines styles, que faire ? À ce stade, nous pouvons utiliser !important pour le résoudre.

Le code suivant :

p{color:red!important;}   
p{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

A ce moment, le texte du paragraphe p sera affiché en rouge.

Remarque : !important doit être écrit devant le point-virgule

Notez ici que lorsque le créateur de la page Web ne définit pas le style CSS, le navigateur affichera les pages Web selon son propre ensemble de styles. Et les utilisateurs peuvent également définir leurs propres styles personnalisés dans le navigateur. Par exemple, certains utilisateurs ont l'habitude de définir une taille de police plus grande afin de pouvoir afficher plus clairement le texte de la page Web. À ce stade, faites attention à la priorité du style : Style par défaut du navigateur