Zwei Möglichkeiten, die CSS-Priorität zu verstehen

Methode 1: Werte hinzufügen

Gehen wir zu MDN, um die offizielle Erklärung anzusehen:

Wie wird die Priorität berechnet?

Die Spezifität ist eine einer bestimmten CSS-Deklaration zugewiesene Gewichtung, die durch den Wert jedes Selektortyps in den passenden Selektoren bestimmt wird.

Wenn die Priorität der Priorität einer der mehreren CSS-Deklarationen entspricht, wird die letzte Deklaration im CSS auf das Element angewendet.

Die Priorität ist nur dann von Bedeutung, wenn mehrere Deklarationen für dasselbe Element vorhanden sind. Denn jede CSS-Regel, die direkt auf ein Element einwirkt, übernimmt immer

über) Regeln, die das Element von einem Vorgängerelement erbt.

Aus der obigen Beschreibung können wir eine sehr wichtige Botschaft gewinnen: Gewicht

Schauen wir uns die Selektorprioritätsbeziehung noch einmal an: ID-Selektor > Klassenselektor = Attributselektor = Pseudoklassenselektor > Tag-Selektor = Pseudoelementselektor.

Es scheint, als würde die Wahrheit bald ans Licht kommen.

Wir müssen nur einen Gewichtungswert für verschiedene Selektortypen festlegen und diese dann entsprechend der Anzahl der Selektoren addieren. Dann erhalten wir ganz einfach die Priorität, zum Beispiel:

Das Gewicht des ID-Selektors ist auf 1000 eingestellt

Die Gewichte von Klassenselektoren, Attributselektoren und Pseudoklassenselektoren werden auf 100 gesetzt.

Der Gewichtungswert von Tag-Selektoren und Pseudoelement-Selektoren wird auf 10 gesetzt

Wir können das Gewicht des folgenden CSS schnell berechnen und die richtige Beurteilung vornehmen.

//Gewichtswert 1110
#app .menü .item{}
//Gewichtswert 210
.menü.menü .item{}
//Gewichtswert 30
.Artikel.Artikel.Artikel{}

Aber. . . Wenn Sie vorsichtig sind, werden Sie möglicherweise feststellen, dass, solange genügend Selektoren mit niedriger Priorität vorhanden sind (z. B.: .item...x200 {} ), der Gewichtungswert mit niedriger Priorität den Gewichtungswert mit hoher Priorität überschreiten kann, der tatsächliche Effekt aber immer noch auf dem Stil mit hoher Priorität basiert. Wenn dies geschieht, kann die aktuelle Methode zur Gewichtsberechnung es möglicherweise nicht erklären!

Dies lässt sich natürlich dadurch erklären, dass man die maximale Anzahl von Selektoren begrenzt und den Gewichtungswert des Selektors erhöht, aber ich bin immer der Meinung, dass dies keine gute Art der Implementierung ist.

Methode 2: Bit-Speicher

Wir gehen davon aus, dass der Gewichtswert in einer unsigned int-Variable gespeichert ist, sodass die Bitposition der Variable insgesamt 32 Bit (4 Byte) beträgt. Wir erweitern sie von oben Bit für Byte wie folgt:

Byte 1: 00000000

Byte 2: 00000000

Byte 3: 00000000

Byte 4: 00000000

Entsprechend den Bytes und Selektoren:

Byte 1: 00000000

Byte 2: 00000000; ID-Selektor

Byte 3: 00000000; Klassenselektor, Attributselektor, Pseudoklassenselektor

Byte 4: 00000000; Tag-Selektor, Pseudoelement-Selektor

Die Anzahl der Selektoren des gleichen Typs wird direkt addiert und in das angegebene Byte eingetragen.

Beispiel 1:

#app .menu .item{}

Das erhaltene Gewichtswertbit lautet wie folgt:

Das Ergebnis ist: 65793

Beispiel 2:

.menu.menu .item{}

Das erhaltene Gewichtswertbit lautet wie folgt:

Das Ergebnis ist: 513

Beispiel 3:

.item.item.item{}

Das erhaltene Gewichtswertbit lautet wie folgt:

Das Ergebnis ist: 3

Im obigen Beispiel beträgt die mittlere Speicherkapazität nur 8 Bit, sodass die maximale Grenze des Selektors 255 beträgt. Natürlich können wir die Bitposition erhöhen, um den Maximalwert des Selektors zu erhöhen.

Zusammenfassen

Hier sind zwei Möglichkeiten, die CSS-Priorität zu verstehen. Welche ist Ihrer Meinung nach für Sie besser geeignet?

Interessierte Freunde können der Redaktion eine Nachricht hinterlassen und uns ihre Meinung mitteilen.