Ungültige Lösung beim Definieren mehrerer Klassenattribute in HTML
|
Beim Schreiben von HTML definieren wir häufig mehrere Werte für Klassenattribute, stellen jedoch auch häufig fest, dass die von uns definierten Werte ungültig sind! ! ! Wenn ich früher auf diese Situation gestoßen bin, habe ich es einfach neu geschrieben oder direkt die ID verwendet, um das CSS-Attribut festzulegen. Heute denke ich, dass etwas nicht stimmt. . . Ich muss die Wahrheit herausfinden! ! ! Code kopieren Der Code lautet wie folgt:<div id="p" Klasse="middle_div padding_10"> <span id="s" class="normal_span"></span> </div> Ich habe in den beiden Klassen unterschiedliche Farben eingestellt, Rot in middle_div und Grün in padding_10. Das Ergebnis zeigte grün und mein erstes Gefühl war: Die Richtung war falsch! Also habe ich die beiden Positionen vertauscht und es war immer noch grün! ! Das. . . . Könnte es sein? ? ? Ich öffnete die CSS-Datei und sah, dass padding_10 vor middle_div stand. Dann tauschte ich ihre Positionen. Aktualisieren Sie den Browser, rot! ! ! Achten Sie beim Definieren mehrerer Klassenwerte darauf, Ihren bevorzugten Stil am Ende hinzuzufügen! Wenn Sie jedoch vor padding_10 ein div hinzufügen (vorausgesetzt, das übergeordnete Element ist ein div), wird es zu div.padding_10. Dann werden Sie feststellen, dass unser p-Div immer grün ist, egal, wo es ist. Anhand dieses Beispiels können wir erkennen, dass die Priorität des CSS-Stils beim Laden der CSS-Datei festgelegt wird und nicht später durch die Position des Klassenattributs im HTML. |
<<: MySQL Series 10 MySQL-Transaktionsisolierung zur Implementierung der Parallelitätskontrolle
Artikel empfehlen
Tipps und Vorsichtsmaßnahmen zur Verwendung des MySQL-Index
1. Die Rolle des Index In allgemeinen Anwendungss...
Detaillierte Installation und Verwendung von RocketMQ in Docker
Um nach RocketMQ-Images zu suchen, können Sie auf...
Zusammenfassung der Methode von React zum Erstellen von Komponenten
Inhaltsverzeichnis 1. Komponenten mit Funktionen ...
Was ist ZFS? Gründe für die Verwendung von ZFS und seine Funktionen
Geschichte von ZFS Das Z-Dateisystem (ZFS) wurde ...
Detaillierte Erläuterung von zwei Möglichkeiten zum dynamischen Ändern von CSS-Stilen in React
Die erste Methode: Fügen Sie dynamisch eine Klass...
Elemente der Benutzererfahrung oder Elemente des Webdesigns
System- und Benutzerumgebungsdesign <br />D...
Grafisches Tutorial zur Installation von JDK1.8 unter CentOS7.4
Schritte zur Linux-Installation von JDK1.8 1. Übe...
Detaillierte Erläuterung der Angular-Datenbindung und ihrer Implementierung
Inhaltsverzeichnis Vorwort Was ist Datenbindung? ...
Einführung in Linux-Komprimierungs- und Dekomprimierungsbefehle
Inhaltsverzeichnis Gängige Komprimierungsformate:...
Beispielcode für die Projektbereitstellung zur Trennung von Front-End und Back-End in Flask und Vue
Ich habe vor einiger Zeit ein Projekt entwickelt....
js, um einen 3D-Karusselleffekt zu erzielen
In diesem Artikel wird der spezifische Code zur I...
So verwenden Sie den Linux-Befehl „locate“
01. Befehlsübersicht Der Befehl „locate“ ist eige...
Eine kurze Diskussion über die Kodierung von HTML-Sonderzeichen in CSS3-Inhalten: „Ich bin ein Sonderzeichen“
Einige im Projekt verwendete Sonderzeichen und Sy...
So konfigurieren Sie den Nginx-Lastausgleich
Inhaltsverzeichnis Nginx-Lastausgleichskonfigurat...
Vollständiger Code zur Implementierung der Vue-Backtop-Komponente
Wirkung: Code: <Vorlage> <div Klasse=&qu...