[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;}

En troisième année, j'étais toujours aussi timide qu'une souris .

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;}

En troisième année, j'étais encoretimide en tant que fille souris

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 :

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

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 :

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

4. Importance

Le code suivant :

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 (m.sbmmt.com) !