Einführung in die ungültige Lösung beim Definieren mehrerer Klassenattribute in HTML

Definieren Sie mehrere Werte für das Klassenattribut. Nach dem Testen müssen Sie beim Definieren mehrerer Klassenwerte darauf achten, Ihren bevorzugten Stil anzugeben ungültig. Beim Schreiben von HTML definieren wir häufig mehrere Werte für das Klassenattribut, stellen jedoch auch häufig fest, dass die von uns definierten Werte ungültig sind! ! !

Wenn ich in der Vergangenheit auf diese Situation gestoßen bin, habe ich sie direkt umgeschrieben oder die ID direkt verwendet, um das CSS-Attribut festzulegen. Aber heute denke ich darüber nach, dass etwas nicht stimmt. . . Ich muss die Wahrheit finden! ! !

Der Code lautet wie folgt:

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

Die in middle_p eingestellten Farben sind unterschiedlich in padding_10 ist grün. Das Ergebnis wird in grün angezeigt, was mir den ersten Eindruck vermittelt: Die Richtung ist umgekehrt!

Also habe ich die beiden Positionen vertauscht und es war immer noch grün! !

Dies. . . .

Könnte es sein? ? ?

Öffnen Sie die CSS-Datei und schauen Sie nach, padding_10 steht vor middle_p.

Aktualisiert den Browser. ! !

Wenn Sie also mehrere Klassenwerte definieren, stellen Sie sicher, dass Sie Ihren Lieblingsstil am Ende angeben!
Aber wenn Sie ein p vor padding_10 hinzufügen (vorausgesetzt, das übergeordnete Element ist p), wird es zu p.padding_10, und dann werden Sie feststellen, dass unser p p immer grün ist, egal wo es ist,

Wie aus diesem Beispiel ersichtlich ist, wird die Priorität des CSS-Stils beim Laden der CSS-Datei bestimmt und nicht durch die spätere Position des Klassenattributs im HTML bestimmt.

Weitere verwandte Artikel zu ungültigen Lösungen, wenn mehrere Klassenattribute in HTML definiert sind, finden Sie auf der chinesischen PHP-Website!