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

Diskussion über CSS-Stilpriorität und kaskadierende Reihenfolge

CSS3 Milchglaseffekt

Grafisches Beispiel für die Verwaltung von Datenträgerkontingenten unter Linux

Auszeichnungssprache - CSS-Stile für Text festlegen

Lösen Sie das Problem der Ausführung von „Hello World“ nach der Docker-Installation

So stellen Sie ein SpringBoot-Projekt mit Docker bereit

Beispielcode zum Ändern der Farbe eines PNG-Bildes durch einen CSS3-Filter

So konfigurieren Sie ein SSL-Zertifikat in Nginx, um den HTTPS-Dienst zu implementieren

Grafisches Tutorial zur Installation und Konfiguration von MySQL Server 5.7.20

Docker stellt eine MySQL-Remoteverbindung bereit, um 2003-Probleme zu lösen

Detaillierte Schritte zur Installation des 64-Bit-Ubuntu-Systems und des Docker-Tools auf Raspberry Pi 3B+

Artikel empfehlen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.5

Einführung in die Verwendung gängiger XHTML-Tags

XHTML-Erste-Schritte-Tutorial: Was ist XHTML?

Detaillierte Erläuterung des Anwendungsfalls für MySQL-Fremdschlüssel (FOREIGN KEY)

Konvertierung von virtuellem Dom in reales Dom mit Vue

Farbverlauf für HTML-Hintergrund durch CSS erreicht

Eine kurze Diskussion über Front-End-Netzwerk, JavaScript-Optimierung und Entwicklungstipps

Mehrere Möglichkeiten zum Senden von HTML-Formularen_PowerNode Java Academy

Standard-CSS-Stil der XHTML-Sprache

SQL-Interviewfrage: Ermitteln Sie die Summe der Zeitunterschiede (ignorieren Sie Duplikate)

Detaillierte Erklärung der HTML-Formularelemente (Teil 2)

So erstellen Sie Ihren eigenen nativen JavaScript-Router

Basierend auf den Sonderzeichen in der URL-Escape-Kodierung

Eine kurze Diskussion über MySQL-Index-Designprinzipien und die Unterschiede zwischen gängigen Indizes

Vue3-Kompilierungsprozess - Quellcodeanalyse