[CSS Note 4] Héritage, cascade et particularité du CSS

Certains styles CSS sont hérités, alors qu'est-ce que l'héritage ? L'héritage est une règle qui permet d'appliquer des styles non seulement à un élément de balise HTML spécifique, mais également à ses descendants. Par exemple, le code suivant : Si une certaine couleur est appliquée à la balise p, ce paramètre de couleur s'applique non seulement à la balise p, mais également à tout le texte des sous-éléments de la balise p, où le sous-élément est le span. étiqueter. Le texte en

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

p et le texte en span sont tous deux définis en rouge. Mais notez que certains styles CSS ne sont pas hérités. Par exemple, border:1px solid red;

p{border:1px solid red;} e388a4556c0f65e1904146cc1a846beeEn troisième année, j'étais toujours aussi timide qu'une souris54bdf357c58b8a65c66d7c19c8e4d114 . 94b3e26ee717c64999d7867364b1b4a3

Dans l'exemple ci-dessus, la fonction du code est uniquement de définir la bordure sur 1 pixel, rouge et pleine pour la balise p, mais cela n'a aucun effet sur le sous-titre. -envergure d'élément.

2. Particularité
Parfois, nous définissons des codes de style CSS différents pour le même élément, alors quel style CSS sera activé sur l'élément ? p{color:red;} .first{color:green;} de183b44a2e33772320f680eb6137d2dEn troisième année, j'étais encore45a2772a6b6107b401db3c9b82c049c2timide en tant que fille souris54bdf357c58b8a65c66d7c19c8e4d114 94b3e26ee717c64999d7867364b1b4a3

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 maximum du sélecteur d'ID est de 100.

Par exemple, le code suivant :

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. , cela peut donc être compris comme Le poids hérité est le plus bas.

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 .notep{color:yellow;} /*权值为100+10+1=111*/

3. En cascade

Réfléchissons à une question : que se passe-t-il s'il peut y avoir plusieurs styles CSS pour le même élément dans le fichier HTML et que ces multiples 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.

La 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 styles CSS. la fin sera appliquée.

Comme le montre le code suivant :

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.

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

4. 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 certains styles. À ce stade, nous pouvons utiliser !important pour le résoudre.

Le code suivant :

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

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

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 la page Web en fonction à 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 < style du créateur de page Web < le style défini par le style de l'utilisateur.

Ce qui précède est le contenu de [CSS Notes 4] sur l'héritage, la cascade et les particularités de CSS. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !