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:

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:

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:

Code kopieren

Der Code lautet wie folgt:

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:

Code kopieren

Der Code lautet wie folgt:

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:

Code kopieren

Der Code lautet wie folgt:

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:

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

Detaillierte Erklärung der Größe des Boxmodells, abhängig von seinen Polsterungs-, Rand- und Rahmenwerten

Diskussion über CSS-Stilpriorität und kaskadierende Reihenfolge

Detaillierte Erklärung der Größe des Boxmodells, abhängig von seinen Polsterungs-, Rand- und Rahmenwerten

Beispiel für die Methode „Mysql implementiert Nullwerte zuerst/letzten“

Zusammenfassung der Vue3-Slot-Nutzung

CSS-Sprites-Technologie integriert mehrere Hintergründe in ein PNG-Bild CSS-Positionierung

JavaScript zum Erzielen eines einfachen Drag-Effekts

Detaillierte Erklärung, ob die MySQL-Datenbank Fremdschlüsseleinschränkungen verwenden soll

Reines CSS, um die Bildlaufleiste auszublenden, aber dennoch den Bildlaufeffekt beizubehalten (mobil und PC)

Implementierung des gemeinsamen Grid-Layouts

MySQL Detaillierte Analyse vom Löschen der Datenbank bis zum Weglaufen_Fortgeschritten (I) - Datenintegrität

Detailliertes Tutorial zum Erstellen eines privaten Git-Servers unter Linux

Artikel empfehlen

Erstellen Sie mit Flutter eine verschiebbare Stapel-Widget-Funktion

Unterschiede zwischen MySQL MyISAM und InnoDB

So richten Sie ein Bereitstellungsprojekt unter einem Linux-System ein

So konfigurieren Sie die Basic Auth-Anmeldeauthentifizierung in Nginx

Detaillierte Erklärung der 4 Codes, die die Website schwarz, weiß und grau machen

Detailliertes Linux-Installationstutorial

Erläuterung der HTTPS-Prinzipien

Einführung in das Linux-Netzwerksystem

JavaScript implementiert eine Eingabefeldkomponente

MySQL-Gruppierungsabfragen und Aggregatfunktionen

Anwendungsbeispiele für React Hooks (6 gängige Hooks)

Detaillierte Erklärung der Docker-Datenspeichervolumes

Detaillierte Erläuterung der Nginx Reverse Proxy WebSocket-Konfiguration

Best Practices zum Teilen von React-Code

Verwenden Sie Javascript, um ein Sliding-Nav-Navigations-Plugin mit Gleitbalkeneffekt zu entwickeln