Quel est l'ordre de codage CSS ? Explication détaillée de l'ordre de codage CSS

Ce que cet article vous apporte, c'est quel est l'ordre de codage CSS ? L'explication détaillée de la séquence de codage CSS a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

Recherche de l'ordre de codage CSS Le dernier style CSS défini écrasera tous les styles existants ou conflictuels définis avant lui, comme dans l'exemple suivant :

Exemple de code

p { color: red; background: yellow }
p { color: green }

Le paragraphe ci-dessus apparaîtra finalement en police verte avec un fond jaune C'est parce que la dernière couleur définie : le vert écrase le rouge précédemment défini. Quant à la raison pour laquelle le fond jaune ne disparaît pas, c'est parce que. il n’y a pas de définition contradictoire dans la deuxième définition de p, elle est donc toujours valable.

Comprenez-vous vraiment ? Bon, faisons un petit test :

Exemple de code

p.red { color: red }
p.green { color: green }
p.blue { color: blue }

Exemple de code

<p class="red green blue">http://www.php.cn/</p>
<p class="green blue red">http://www.php.cn/</p>
<p class="blue red green">http://www.php.cn/</p>

Excusez-moi, quand il s'affiche enfin, quelles sont les valeurs ​​dans les trois paragraphes ci-dessus ? Dans quelle couleur le texte apparaîtra-t-il ?

La réponse est qu'ils sont tous affichés en bleu, c'est-à-dire en bleu. Bien que chaque paragraphe comporte trois styles p appliqués dans un ordre différent, il semble que la couleur doive être déterminée en fonction de l'ordre dans lequel le style p est appliqué. les styles sont appliqués. Par exemple, le premier est affiché en bleu, le deuxième est affiché en rouge et le troisième est affiché en vert. En fait, cela n'a rien à voir avec l'ordre dans lequel les styles sont appliqués. sont appliqués. Ils obéissent tous finalement au dernier style spécifié et la couleur est bleue.

Ce qui précède est quel est l'ordre d'encodage CSS ? Une introduction complète à l'explication détaillée de l'ordre de codage CSS. Si vous souhaitez en savoir plus sur le Tutoriel CSS3, veuillez faire attention au site Web PHP chinois.

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!