Eine kurze Diskussion über den CSS-Kaskadierungsmechanismus

Warum hat CSS einen Kaskadierungsmechanismus?

Da es in CSS mehrere Stile geben kann, die gleichzeitig eine bestimmte Eigenschaft desselben Elements beeinflussen, kann der Kaskadierungsmechanismus Stilkonflikte zwischen Autoren (Personen, die Code schreiben), Benutzern (Personen, die Seiten durchsuchen) und Benutzeragenten (im Allgemeinen Browsern) lösen.

Jede Stilregel in der Kaskade hat einen Gewichtungswert. Wenn mehrere dieser Regeln gleichzeitig gelten, hat die Regel mit der höchsten Gewichtung Vorrang. Im Allgemeinen ist der vom Autor angegebene Stilgewichtungswert höher als der Benutzerstilgewichtungswert und der Benutzerstilgewichtungswert ist höher als der Client- (Benutzeragent-)Gewichtungswert. Genereller Gewichtswert und Objekt, ob vorhanden! wichtig, die Spezifität hängt mit der Position zusammen. In der Stapelreihenfolge sind die folgenden Gewichtswerte von klein nach groß

(1) Benutzeragent-Stil

(2) Allgemeiner Benutzerstil

(3) Allgemeiner Stil des Autors

(4) Autor wichtiger Stil (!important)

(5) Benutzerwichtige Stile (!important)

(6) Wenn zwei Stile aus demselben Code stammen, z. B. beide vom Autor (Code) stammen, und ihre Stildeklarationen gleich wichtig sind, werden sie auf Grundlage ihrer Spezifität berechnet und der Stil mit der höheren Spezifität überschreibt den mit der niedrigeren Spezifität.

(7) Bei gleicher Spezifität ist die Priorität umso höher, je neuer der Stil ist.

Warum haben wichtige, von Benutzern festgelegte Stile eine höhere Priorität als wichtige, von Autoren festgelegte Stile? Der Grund hierfür besteht darin, dass es Benutzern erleichtert werden soll, bestimmte spezielle Anforderungen zu erfüllen, z. B. die Anpassung der Seitenschriftgröße.

Berechnung der Selektorspezifität

(1) Wenn eine Deklaration im Style-Attribut eines Elements erscheint, wird a als 1 gezählt;

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

(3) c ist gleich der Summe aller Klassenselektoren, Attributselektoren und Pseudoklassenselektoren im Selektor.

(4) d ist gleich der Summe aller Tag-Selektoren und Pseudoelement-Selektoren im Selektor.

abcd ist die Spezifität des Selektors. Die Vergleichsreihenfolge beginnt bei a, und je größer, desto höher die Priorität.

Beachten:

1. Vererbt hat die niedrigste Priorität und keine Spezifität
2. Die Spezifität des Combiners (wie +, >) und des Universalselektors (*) beträgt 0

.box{} /*Spezifität=0,0,1,0*/
.box div{} /*Spezifität=0,0,1,1*/
#nav li{} /*Spezifität=0, 1, 0, 1*/
p:first-line{} /*Spezifität=0,0,0,2*/
style="" /*Spezifität=1,0,0,0*/

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.