Explication détaillée de l'héritage CSS et de la cascade

Dans la section précédente, nous avons présenté comment utiliser la structure du document et les sélecteurs CSS pour appliquer divers styles riches aux éléments. Aujourd'hui, parlons de la cascade et de l'héritage CSS.

Héritage : Le mécanisme utilisé par un élément pour transférer les valeurs d'attribut​​à ses éléments descendants. Pour faire simple, certains attributs d'un élément peuvent être transmis aux éléments enfants via. héritage.

Par exemple :

Test d'héritageCe n'est pas span Le contenu dans

p{color:red}, vous verrez ici que le texte dans l'élément p et l'élément d'essai deviennent tous deux rouges, à cause du attributs de l'élément p Hérité par span. Cependant, certains attributs ne peuvent pas être transmis par héritage.
Par exemple, la frontière ne sera pas obtenue par héritage. En fait, l'héritage est facile à comprendre, mais il doit être compris en même temps que la cascade.

Cascading : lors de la détermination des styles à utiliser pour un élément, vous devez considérer les particularités de l'héritage et de la déclaration ensemble, donc quel style CSS doit être activé. Ce processus s'appelle. en cascade.

Les particularités sont évoquées plus haut, alors jetons-y un œil.

Tout d'abord, permettez-moi de poser une question. Laquelle des deux paires de règles suivantes va gagner ?

h1{color:red >
corps h1{couleur:bleu>

h2{couleur:rouge}
h2.color{couleur : vert>

Parmi les deux paires de règles ci-dessus, évidemment une seule peut gagner, mais laquelle doit gagner ? La réponse réside dans la spécificité de chaque sélecteur.

La spécificité spécifique d'un sélecteur est la suivante :
1 Pour chaque valeur d'attribut ID donnée dans la règle, la spécificité est augmentée de 0, 1 ,0,0
2. Pour chaque sélection de classe dans la règle qui correspond au sélecteur d'attribut et à la pseudo-classe, la spécificité est ajoutée par 0,0,1,0
3 .Pour chaque élément et pseudo-élément de la règle, la spécificité est de 0,0,0,1
4. Les combinateurs et les jokers n'apportent rien à la spécificité.
5. La spécificité des styles en ligne est augmentée de 1,0,0,0
6. Les propriétés héritées n'ont aucune spécificité, pas même 0 spécificité, donc ça. doit être inférieur au caractère générique.
7.!important gagnera toujours.

Il y a donc des résultats pour les deux ensembles de règles ci-dessus :

h1{color:red}                                                                                          🎜> corps h1{couleur:bleu} 0,0,0,2

h2{couleur:rouge} 0,0,0,1
h2. color{color:green} 0,0,1,0
Donc le rouge et le vert prendront effet.

3. Ordre de spécificité des déclarations d'éléments.

4. L'ordre d'apparition des déclarations d'éléments.

Pour des articles plus détaillés sur l'héritage CSS et la cascade, veuillez faire attention au site Web PHP chinois !