Analyse des Kaskadenmechanismus in CSS

In diesem Artikel werden hauptsächlich relevante Informationen zum CSS-Kaskadenmechanismus vorgestellt. Der Kaskadenmechanismus kann die Stilkonflikte zwischen dem Autor (der Person, die den Code schreibt), dem Benutzer (der Person, die die Seite durchsucht) und dem Benutzeragenten lösen. bezieht sich im Allgemeinen auf den Browser. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

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 Gegenstände, ob da! 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 Aussage in der erscheint Stilattribut des Elements, a wird als 1 gezählt;

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

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

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

a-b-c-d ist die Spezifität des Selektors. Die Vergleichsreihenfolge beginnt mit einem ersten, der zuerst größer ist.

Hinweis:

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

2. Kombination von Zeichen (z. B. +, > ) Und der universelle Selektor (*) hat eine Spezifität von 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*/
style="" /*特异度=1，0，0，0*/

Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es wird für alle beim Lernen nützlich sein. Bitte beachten Sie die chinesische PHP-Website für weitere verwandte Inhalte!

Verwandte Empfehlungen:

Analyse prozentualer Probleme in CSS

Das obige ist der detaillierte Inhalt vonAnalyse des Kaskadenmechanismus in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!