Funktionsweise der CSS-Spezifität in einem Browser

Viele Menschen finden CSS komplex. Sie kommen mit verschiedenen Ausreden: Mangelnde Fähigkeit, CSS oder CSS zu verstehen, ist an sich schlecht. Aber die Realität ist, dass die Leute einfach nicht die Zeit gefunden haben, es wirklich zu studieren. Wenn Sie diesen Artikel lesen, möchten Sie CSS lernen und es ist großartig!

Was ist CSS-Spezifität?

Haben Sie jemals einen Stil geschrieben, aber er funktioniert nicht, dann fügen Sie hinzu ! Wichtig (oder nicht), und dennoch funktioniert er nicht? Dann schauen Sie sich Devtools an und stellen fest, dass sich irgendwo ein anderer Stil mit Ihrem überschneidet?

Dies ist die Besonderheit von CSS! Auf diese Weise wählt der Browser aus, welche der konkurrierenden Selektoren auf das Element angewendet werden sollen. Wenn der Browser feststellt, dass zwei oder mehr Selektoren mit demselben Element übereinstimmen und die Selektoren widersprüchliche Regeln haben, muss er herausfinden, welche der Regeln auf dieses Element angewendet werden sollen. Die Art und Weise, wie dies geschieht, wird als "CSS-Spezifitätswert" bezeichnet.

Bevor wir uns mit der CSS-Spezifität befassen, sollten Sie Folgendes beachten:

1. Die CSS-Spezifität ist nur wichtig, wenn mehrere Selektoren dasselbe Element beeinflussen. Der Browser muss herausfinden, welcher Stil auf das entsprechende Element angewendet werden soll, wenn widersprüchliche Eigenschaftswerte vorhanden sind.
2. Wenn zwei oder mehr übereinstimmende Selektoren denselben Spezifitätswert (Gewicht) haben, wählt der Browser den „neuesten“ übereinstimmenden Selektor aus, der näher am Ende der Liste der übereinstimmenden Selektoren angezeigt wird. Im folgenden Abschnitt wird erläutert, was eine „Liste geeigneter Selektoren“ ist.
3. Der Browser erstellt eine „Liste geeigneter Selektoren“, indem er alle Stile auf der Webseite kombiniert und diejenigen herausfiltert, die nicht mit dem Element „aktuell gestaltet“ übereinstimmen. Die ersten Selektoren im Stylesheet befinden sich oben in der Liste und die letzten Selektoren unten.
4. Die Stileigenschaft eines Elements hat einen größeren Spezifitätswert als Selektoren in Stylesheets, es sei denn, es gibt ! Wichtig in der Stylesheet-Auswahl.
5. Die Verwendung von ! Important (was in einigen Fällen als schlechte Praxis angesehen wird) ändert die Spezifität des Selektors. Wenn zwei Selektoren die gleiche Spezifität haben, gewinnt der Selektor mit ! Important . Und wenn beide haben ! Wichtig , gewinnt der "neueste" Selektor.

Spezifitätswert

Jetzt können wir fortfahren, wie der Browser die Spezifität des Selektors bestimmt.

Die Spezifität des Selektors kann als dreistellige Zeichenfolge dargestellt werden, die durch einen Bindestrich (oder was auch immer) getrennt ist: „2–4–1“. Die erste Ziffer ist die Anzahl der vorhandenen ID-Selektoren, die zweite die Anzahl der Klassenselektoren, Attribut- und Pseudoklassenselektoren und die dritte die Anzahl der verfügbaren Typ- und Pseudoelementselektoren. Zum Beispiel:

#red.blue // 1-1-0 #green // 1-0-0 div.yellow#red // 1-1-1 .red.blue.yellow // 0-3-0 

Definition der "spezifischsten"

Um festzustellen, welcher Selektor spezifischer ist, können Sie jeden der drei Werte vergleichen.

Angenommen , Sie haben 1-1-1 und 0-3-0 , wie in den letzten beiden Beispielen, und Sie müssen bestimmen, welches die spezifischste ist. Zuerst vergleichen Sie die letzten Werte 1 und 0 , und in diesem Fall gewinnt 1 . Dies bedeutet, dass div.yellow#red im Moment einen größeren Spezifitätswert hat ... aber wir haben den Vergleich der Werte noch nicht abgeschlossen.

Vergleichen Sie als nächstes die Werte 1 und 3 , 3 gewinnt. Derzeit hat .red.blue.yellow einen höheren Spezifitätswert.

Schließlich vergleichen wir die ersten Werte, 1 und 0 , und 1 gewinnt, sodass div.yellow#red spezifischer ist als .red.blue.yellow .

Die CSS-Spezifität des Selektors liefert eine gute Erklärung dafür, warum keine Anzahl von Klassenselektoren den ID-Selektor überschreiben kann.

Kleine Warnungen

3 „Fallstricke“, die Sie beachten sollten:

1. Ich habe oben geschrieben, dass die zweite Zahl in einer Folge von Zahlen, die aus drei besteht, "die Anzahl der Klassenselektoren, Attributselektoren und Pseudoklassen" ist. Dies gilt in allen Fällen, außer wenn es sich um :not() Pseudoklasse handelt. Wenn es :not() Pseudoklasse ist, betrachten wir es nicht, sondern ignorieren es einfach. Die darin enthaltenen Selektoren werden jedoch nicht ignoriert, sondern als normal angesehen.
2. Die CSS-Spezifität versteht die „Form“ eines Selektors. Dies bedeutet, dass bei *[id="yellow"] und #yellow der erste als Attributselektor behandelt wird.
3. Der universelle Selektor * allein zählt nicht zur Spezifität des Selektors. Im obigen Absatz [id="yellow"] ist ein Teil des Selektors wirklich wichtig.

Ich hoffe, dieser Artikel ist leicht zu verstehen und hilft zu verstehen, was CSS-Spezifität ist. Jetzt können Sie sich den Stil ansehen und leicht feststellen, wie „spezifisch“ er ist.