Solution non valide lorsque plusieurs attributs de classe sont définis dans la production de pages HTML_HTML/Xhtml_Web

Dans le processus d'écriture HTML, nous définissons souvent plusieurs valeurs pour l'attribut de classe, 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é ! ! !

Copier le code

Le code est le suivant :

Je suis en deux. Les couleurs définies dans chaque classe 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 de

est vert. Cela m'a donné le premier sentiment : le. 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 HTML ultérieurement.