Introduction à la solution invalide lors de la définition de plusieurs attributs de classe en HTML

Définissez plusieurs valeurs pour l'attribut de classe. On constate souvent que le style défini n'est pas valide. Après avoir testé, lors de la définition de plusieurs valeurs de classe, vous devez faire attention à mettre votre style préféré à la fin, sinon ce sera le cas. invalide. 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é ! ! !

Le code est le suivant :

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

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

Le résultat est vert, ce qui m'a donné ma première impression : 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_p.

Actualisez 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 p devant padding_10 (en supposant que l'élément parent est p), il devient p.padding_10, et vous constaterez alors que peu importe où il se trouve, notre p p est toujours vert,

Comme le montre cet exemple, la priorité du style CSS est déterminée lors du chargement du fichier CSS, et n'est pas déterminée par la position de l'attribut class dans le code HTML ultérieur.

Pour plus d'articles sur les solutions invalides lorsque plusieurs attributs de classe sont définis en HTML, veuillez faire attention au site Web PHP chinois !