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
Tutorial-Diagramm zur Installation des MySQL-Dienstes über MySQL Installer unter Windows
MYSQL bietet offiziell eine Installer-Methode zum...
html öffnet ein neues Fenster mit einem Hyperlink und kann Fenstereigenschaften steuern
1. Die Größe des durch den HTML-Hyperlink geöffne...
Das Vue-Projekt realisiert das Zeichnen eines Wasserzeichens in einem bestimmten Bereich
In diesem Artikel erfahren Sie, wie Sie mit Vue e...
Designbeispiele für Dropdown-Menüs und Schiebemenüs
Ich habe viele Websites gefunden, die Dropdown- od...
So analysieren Sie die Attributschnittstelle zum Hinzufügen eines Dateisystems unter Linux oder Android
Der Erste: 1. Fügen Sie wichtige Headerdateien hi...
HTML-Formular_PowerNode Java Academy
1. Formular 1. Die Rolle des Formulars HTML-Formu...
Das Festlegen der Z-Index-Eigenschaft für die Flash-Overlay-Popup-Ebene im Webdesign funktioniert nicht
Standardmäßig wird Flash immer auf der obersten Eb...
JS realisiert den Effekt des Bildwasserfallflusses
In diesem Artikel wird der spezifische JS-Code zu...
Eine vorläufige Studie zu JSBridge in Javascript
Inhaltsverzeichnis Der Ursprung von JSBridge Das ...
Detaillierte Erklärung der grundlegenden Verwendung des VUE Watch Listener
Inhaltsverzeichnis 1. Der folgende Code ist eine ...
Verwenden Sie Docker, um ein Git-Image mithilfe des Klon-Repositorys zu erstellen
Überblick Ich verwende Docker seit über einem Jah...
Tutorial zum Ändern des Root-Passworts in MySQL 5.7
Versionsupdate, das Passwortfeld im Originalbenut...
MySQL-Operator-Zusammenfassung
Inhaltsverzeichnis 1. Arithmetische Operatoren 2....
Detaillierte Erläuterung der benutzerdefinierten MySQL-Funktionen und gespeicherten Prozeduren
Vorwort Dieser Artikel stellt hauptsächlich die r...
Lassen Sie uns ausführlich über den Symboldatentyp in ES6 sprechen
Inhaltsverzeichnis Symboldatentyp Der Grund, waru...