Diskussion über CSS-Stilpriorität und kaskadierende Reihenfolge
|
Im Allgemeinen : [1 wichtige Flagge] > [4 besondere Flaggen] > Deklarationsreihenfolge !important > [ id > klasse > tag ] Durch die Verwendung von !important kann die Priorität auf die höchste gesetzt werden, gefolgt vom Stilobjekt, dann ID > Klasse > Tag. Darüber hinaus haben die Stile, die in der Reihenfolge der Deklaration nach den Stilen derselben Ebene erscheinen, hohe Priorität. Werfen wir einen Blick auf dieses seltsame Ding!wichtig Code kopieren Der Code lautet wie folgt:<style type="text/css"> div{Hintergrund: rot !wichtig; Hintergrund: blau} </Stil> Mit Ausnahme von IE6 zeigen alle anderen Browser den Hintergrund rot an. Genau das ist die Funktion von !important. Es bedeutet, dass ich der Wichtigste bin, solange ich hier bin. Nichts kann mich ersetzen. Egal, was Sie sehen, wir sind alle gleich! Ein zusätzliches englisches Wort „wichtig“ hinzufügen? Sehr lebendig und treffend. IE6 zeigt hier einen blauen Hintergrund an. Es ist nicht so, dass IE6 !important nicht unterstützt, aber er überschreibt die vorherigen entsprechend der Reihenfolge der Stildeklarationen. Derzeit erkennt er !important nicht mehr und erkennt es überhaupt nicht. Dies ist einer der beliebtesten IE6-Hacks. Wenn du es so schreibst, wird der Hintergrund normalerweise in rot angezeigt: Code kopieren Der Code lautet wie folgt:<style type="text/css"> div{Hintergrund: blau; Hintergrund: rot !wichtig; } </Stil> Schauen wir uns das 4-Bit-Sonderflag [0.0.0.0] an. Von links nach rechts gilt: Jedes Mal, wenn einer Position +1 gegeben wird, hat der vorherige Absatz einen unbestreitbaren überwältigenden Vorteil gegenüber dem nächsten Absatz. Unabhängig davon, wie groß der Wert der letzten Ziffer ist, kann er niemals den Wert der vorherigen Ziffer überschreiten, der 1 ist. 1. Inline-Stile [1.0.0.0] A: <span id="demo" style="color:red"></span> B: Es gibt auch das von JS gesteuerte Inline-Style-Objekt, document.getElementById("demo").style.color="red"; Die beiden gehören zur gleichen Ebene, aber im Allgemeinen hat der von JS gesteuerte Inline-Stil eine höhere Priorität. Dies hängt mit der Reihenfolge der Deklaration zusammen und hat nichts mit der Essenz zu tun, da DOM-Operationen häufig nach dem Laden des DOM-Baums ausgeführt werden. 2. ID-Selektor [0.1.0.0] 3. Klassen-, Attribut-, Pseudoklassenselektoren [0.0.1.0] 4. Element-Tags, Pseudoelement-Selektoren [0.0.0.1] Weitere Informationen zu CSS-Selektoren finden Sie im W3C- oder CSS-Handbuch. Ich werde hier nicht näher darauf eingehen. Beachten Sie den Pseudoklassenselektor LVHA-Pseudoklasse, Stile werden in der LVHA-Prioritätsreihenfolge von rechts nach links überschrieben und unterschiedliche Reihenfolgen erzeugen unterschiedliche Effekte. a:link - Standard-Linkstil a:visited – besuchter Linkstil a:hover – Maus-Hover-Stil a:active - Mausklick-Stil Zum Schluss schreiben wir über das Phänomen, dass JS Inline-Stile mit !important steuert: Schauen Sie sich die normale Demo1 an : Code kopieren Der Code lautet wie folgt:<style type="text/css"> div{Hintergrund: rot !wichtig; Höhe:20px;} #demo1{ Hintergrund: grün;} .demo1{ Hintergrund:blau;} </Stil> Code kopieren Der Code lautet wie folgt:<div class="demo1" id="demo1" style="Hintergrund: gelb"></div> Code kopieren Der Code lautet wie folgt:<Skripttyp="text/javascript"> document.getElementById("demo1").style.background="schwarz"; </Skript> Schließlich wird der Hintergrund rot angezeigt, was kein Problem sein sollte. !important ändert die Priorität, wo immer es platziert wird, und der nachfolgende JS-Code ändert die Priorität nicht. -------------------------------------------------------------------------------- Eine weitere Demo2 : Code kopieren Der Code lautet wie folgt:<style type="text/css"> div{Hintergrund: rot !wichtig; Höhe:200px;} #demo2{ Hintergrund: grün;} .demo2{ Hintergrund: blau;} </Stil> Code kopieren Der Code lautet wie folgt:<div class="demo2" id="demo2" style="Hintergrund: gelb !wichtig"></div> Code kopieren Der Code lautet wie folgt:<Skripttyp="text/javascript"> document.getElementById("demo2").style.background="schwarz"; </Skript> IE6,7 zeigt rot FF2+ zeigt gelb Opera9+ zeigt rot Safari zeigt gelb -------------------------------------------------------------------------------- Demo 3: Code kopieren Der Code lautet wie folgt:<style type="text/css"> div{Hintergrund: rot !wichtig; Höhe:200px;} #demo3{ Hintergrund: grün;} .demo3{ Hintergrund: blau;} </Stil> Code kopieren Der Code lautet wie folgt:<div class="demo3" id="demo3" style="Hintergrund: gelb !wichtig"> </div> Code kopieren Der Code lautet wie folgt:<Skripttyp="text/javascript"> document.getElementById("demo3").style.background="schwarz !wichtig"; </Skript> IE6,7 zeigt rot FF2+ zeigt gelb Opera9+ zeigt Schwarz an Safari zeigt Schwarz an -------------------------------------------------------------------------------- Erklären Sie die beiden obigen Beispiele : Das von JS gesteuerte Stilobjekt ist tatsächlich ein Inline-Stil, was korrekt ist. Die drei Browser liefern jedoch unterschiedliche Ergebnisse für das zum Attributwert des JS-Steuerelementstilobjekts hinzugefügte !important: IE: JS steuert den Attributwert des Stilobjekts, um den Wert des Inline-Stilattributs vollständig zu überschreiben. Element.style.property="value !important" wird nicht unterstützt und es wird eine Fehlermeldung angezeigt: Ungültiger Parameter. FF2+: Element.style.property="value !important" wird nicht vollständig unterstützt: !important ist ungültig und es wird kein Fehler gemeldet. Wenn der Wert des Inline-Style-Attributs nicht !important hat, wird er vollständig überschrieben. Wenn !important vorhanden ist, hat das Inline-Style-Attribut die höchste Priorität und wird von keinem JS-gesteuerten Style beeinflusst. Opera9+: JS steuert den Attributwert des Stilobjekts, um den Attributwert des Inline-Stils vollständig zu überschreiben, und unterstützt Element.style.property="value !important". Safari: Unterstützt Element.style.property="value !important" . Wenn der Wert des Inline-Style-Attributs nicht !important hat, wird er vollständig überschrieben. Wenn !important vorhanden ist, hat das Inline-Style-Attribut die höchste Priorität und wird von keinem JS-gesteuerten Style beeinflusst. Basiert die Priorität von CSS-Stilen auf der Reihenfolge, in der sie im Stylesheet erscheinen, oder auf der Reihenfolge, in der die Klassen- oder ID-Werte im Element deklariert werden? Früher dachte ich, dass der später in der Klasse deklarierte Wert eine höhere Priorität hätte, aber tatsächlich hängt es von der Reihenfolge ab, in der er im Stylesheet erscheint. Code: Code kopieren Der Code lautet wie folgt:<style type="text/css"> div{ Höhe: 200px; Breite: 200px; Hintergrund: rot; } .b{ Hintergrund: grün; } .a{ Hintergrund: blau;} </Stil> </Kopf> <Text> <div class="ab" 2style="background:pink;"> </div> </body> Der Stil des Div wird in der Stilfarbe Blau angezeigt. Lernen Sie alle Technologien der Front-End-Branche kennen und reisen Sie in alle Städte rund um Peking. Dann werde ich an den Ort zurückkehren, an dem ich geboren und aufgewachsen bin, denn Heimat ist dort, wo meine Verwandten sind. |
<<: Wie werden Leerzeichen in HTML dargestellt (was bedeuten sie)?
>>: Beispielcode für die Verwendung von Textausrichtung und Rand: 0 automatisch zentrieren in CSS
Artikel empfehlen
So beheben Sie den Fehler "ERROR 1045 (28000)" beim Anmelden bei MySQL
Heute habe ich mich beim Server angemeldet und mi...
Verwenden von JS zum Implementieren von Beispielcode für den Algorithmus zur binären Baumdurchquerung
Inhaltsverzeichnis Vorwort 1. Binärer Baum 1.1. D...
Tutorial-Diagramm zur VMware-Installation des Ubuntu 20.04-Betriebssystems
Memo: Einfach erleben. Eintrag: Nr. 209 Diese Bei...
Detaillierte Erläuterung der Reihenfolge der MySQL-Abfrageergebnisse gemäß der Reihenfolge der ID in in ()
Detaillierte Erläuterung der Reihenfolge der MySQ...
Vue realisiert den Gleitkreuzeffekt des Balles
In diesem Artikelbeispiel wird der spezifische Co...
CSS3 + HTML5 + JS realisiert den Schrumpf- und Expansionsanimationseffekt eines Blocks
Als ich kürzlich an einem Projekt arbeitete, stel...
Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten
Das img-Tag in XHTML sollte wie folgt geschrieben...
Beispielcode zur Implementierung von Neon-Button-Animationseffekten mit CSS3.0
Heute zeige ich Ihnen einen Neon-Button-Animation...
Lernen Sie die schwarze Technologie der Union-All-Verwendung in MySQL 5.7 in 5 Minuten
Leistung von „Union All“ in MySQL 5.6 Teil 1: MyS...
So verbessern Sie die Startgeschwindigkeit von Idea und beheben Probleme mit verstümmelten Zeichen im Tomcat-Protokoll
Inhaltsverzeichnis Vorwort Ideenstartgeschwindigk...
Beispielcode für die Verwendung von js zur Implementierung gleichzeitiger Ajax-Anfragen, um die Anzahl der Anfragen zu begrenzen
Problembeschreibung: Wenn die Anzahl der asynchro...
Lösen Sie das Problem des MySQL-Datenverlusts, wenn Docker Redis neu startet
Amtliche Dokumentation: Daher sollte MySQL wie fo...
Implementierungsmethode der rekursiven MySQL-Baumabfrage
Vorwort Bei baumstrukturierten Daten in der Daten...
HTML-Textfeld (Text) ist nicht in mehreren Möglichkeiten verfügbar, um schreibgeschützt zu erreichen
Methode 1: <input id= "File1" type= &...
MySQL deaktiviert die Überprüfung der Kennwortstärke
Informationen zur Überprüfung der Kennwortstärke:...