Detaillierte Erläuterung der Verwendung des CSS-Kaskadenmechanismus

Dieses Mal werde ich Ihnen die Verwendung des CSS-Kaskadierungsmechanismus ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung des CSS-Kaskadierungsmechanismus? Hier ist ein praktischer Fall.

Warum gibt es einen Kaskadenmechanismus in CSS?

Weil es in CSS mehrere Stile geben kann, die sich auf ein bestimmtes Attribut desselben Elements auswirken Gleichzeitig kann der Kaskadenmechanismus Stilkonflikte zwischen Autoren (Personen, die Code schreiben), Benutzern (Personen, die Seiten durchsuchen) und Benutzeragenten (allgemein als Browser bezeichnet) lösen.

Jede Stilregel in der Kaskade hat einen Gewichtungswert. Wenn mehrere Regeln gleichzeitig wirksam werden, hat die Regel mit der größten Gewichtung Vorrang. Im Allgemeinen ist der vom Autor angegebene Stilgewichtswert höher als der Benutzerstilgewichtswert und der Benutzerstilgewichtswert ist höher als der Clientgewichtswert (Benutzeragent). Allgemeine Gewichtswerte und Objekte, ob vorhanden! Wichtig ist, dass die Spezifität mit der Position zusammenhängt. In der Kaskadenreihenfolge sind die folgenden Gewichtswerte von klein nach groß

(1) Benutzeragentenstil

(2) Benutzerallgemeiner Stil

(3) Autor allgemeiner Stil

(4) Autor wichtiger Stil (!important)

(5) Benutzer wichtiger Stil (!important)

(6) Wenn zwei Stile aus demselben stammen Code, wie z. B. beide Vom Autor (Code) und ihre Stildeklarationen sind gleichermaßen wichtig. Sie werden entsprechend der Spezifität berechnet. Derjenige mit hoher Spezifität deckt den

mit niedriger Spezifität ab (7). Die Spezifität ist auch gleich, je weiter hinten, desto höher ist die Priorität des Stils

Warum haben die vom Benutzer festgelegten wichtigen Stile eine höhere Priorität als die wichtigen Stile des Autors? Der Grund dafür ist die Erleichterung Benutzer müssen einige spezielle Anforderungen umsetzen, z. B. die Anpassung der Schriftgröße der Seite usw. .

Berechnung der Selektorspezifität

(1) Wenn eine Deklaration im Stilattribut eines Elements erscheint, dann wird eine gezählt als 1;

(2) b ist gleich der Summe aller ID-Selektoren im Selektor und

(3) c ist gleich allen Klassenselektoren und Attributselektoren im Selektor Summe der Gesamtzahl der Pseudoklassenselektoren

(4) d ist gleich der Summe der Gesamtzahl aller Labelselektoren und Pseudoelementselektoren im Selektor

a-b-c-d ist das Selektor Spezifität, die Vergleichsreihenfolge beginnt von vorne, und wer zuerst größer ist, hat eine höhere Priorität.

Hinweis:

1. Vererbung hat die niedrigste Priorität und keine Spezifität

2. Kombination von Zeichen (z. B. +, > ) Und die Spezifität des Universalselektors (*) ist 0

.box{} /*特异度=0，0，1，0*/
.box p{} /*特异度=0，0，1，1*/
#nav li{} /*特异度=0，1，0，1*/
p:first-line{} /*特异度=0，0，0，2*/
 /*特异度=1，0，0，0*/

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Analyse des Ladens von Webpack-Stilen

20 Vorsichtsmaßnahmen für die Verwendung von CSS-Code in praktischen Front-End-Projekten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des CSS-Kaskadenmechanismus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!