La définition de plusieurs attributs de classe en HTML n'est pas valide

Cette fois, je vais vous apporter une définition invalide de plusieurs attributs de classe en HTML. Quelles sont les précautions concernant la définition invalide de plusieurs attributs de classe en HTML. . Levez-vous et jetez un œil.

Dans le processus d'écriture HTML, nous définissons souvent plusieurs valeurs pour l'attribut class, mais nous constatons aussi souvent que les valeurs que nous définissons ne sont pas valides ! ! !

Lorsque j'ai rencontré cette situation dans le passé, je la réécrirais directement, ou utiliserais directement l'ID pour définir l'attribut CSS. Mais aujourd'hui, j'y pense, quelque chose ne va pas. . . Je dois trouver la vérité ! ! !

<div id="p" class="middle_div padding_10"> 
<span id="s" class="normal_span"></span> 
</div>

Les couleurs que j'ai définies dans les deux classes sont différentes. La couleur définie dans middle_div est rouge et la couleur définie dans padding_10 est verte

Le résultat est vert. , ce Mon premier ressenti a été : le sens est inversé !

J'ai donc inversé les deux positions, et c'était toujours vert ! !

Ceci. . . .

Est-ce possible ? ? ?

Ouvrez le fichier CSS et jetez un œil. Effectivement, padding_10 est devant middle_div

Actualisé le navigateur, rouge ! ! !

Ainsi, lorsque vous définissez plusieurs valeurs de classe, assurez-vous de mettre votre style préféré à la fin !
Mais, si vous ajoutez un div devant padding_10 (en supposant que l'élément parent est un div) et qu'il devient div.padding_10, alors vous constaterez que peu importe où il se trouve, notre p div est toujours vert,

Comme le montre cet exemple, la priorité du style CSS est déterminée lorsque le fichier CSS est chargé, plutôt que déterminée par la position de l'attribut class dans le code HTML suivant.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php autres articles liés !

Lecture connexe :

Comment l'élément de sélection obtient l'effet de défilement des polices et des images

Comment enregistrer le format de TextArea de HTML

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!