Spezifitätshierarchie in CSS | Erklärt
Die Spezifität in CSS bestimmt die Reihenfolge der CSS -Selektoren, die auf ein Element angewendet werden sollen. Zum Beispiel kann ein Element von verschiedenen CSS -Stilen beeinflusst werden und es wäre daher schwierig, sich an einen Stil anzupassen. Das Spezifitätskonzept hat den Prozess der Entscheidung erleichtert, welche CSS -Eigenschaft für ein Element ausgewählt werden soll. Dazu wird eine Spezifitätshierarchie befolgt.
Dieser Artikel bietet einen tiefen Einblick in die Spezifitätshierarchie mit den folgenden Lernergebnissen:
- Spezifitätshierarchie in CSS
- So berechnen Sie die Spezifitätshierarchie -Punktzahl
Spezifitätshierarchie in CSS
Die Spezifitätshierarchie ist die wichtigste Bestandteil der Praktizierungspezifität. Die Spezifitätshierarchie bezieht sich auf die Kategorien der CSS -Selektoren und ihre Ausführungsreihenfolge in CSS. Die folgenden vier Gruppen beziehen sich
Inline -Stile: Die im Element verwendete Style -Eigenschaft und die Spezifität von Inline -Stilen ist größer als alle anderen Gruppen.
Kennung (ID): Das ID -Attribut eines Elements und die Spezifität beträgt einen Schritt nach Inline -Stilen.
Klassen, Pseudoklassen, Attribute: Diese Gruppe enthält die Klassen, Pseudoklassen (z. B.: Link,: aktiv,: Fokus) und andere Attribute. Das Spezifitätsniveau dieser Gruppe ist ein Schritt nach der Identifikatorgruppe.
Elemente, Pseudoelemente: Diese Gruppe enthält Elemente (P, H1, Div) und Pseudoelemente (:: vor, :: nach) . Die Spezifität dieser Gruppe liegt auf der niedrigsten Ebene.
So berechnen Sie die Spezifitätshierarchie -Punktzahl
Hinter dem Konzept der Spezifitätshierarchie gibt es eine mathematische Berechnung, die zur Quantifizierung der Spezifität und zur Priorisierung des CSS -Selektors basierend auf dieser Punktzahl führt. Die Punktzahl kann berechnet werden, indem der unten angegebene Benchmark folgt.
| CSS -Selektor | Spezifitätshierarchie Score |
|---|---|
| Inline -Stile | 1000 |
| Kennung (ID) | 100 |
| Klasse, Pseudoklassen, Attribute | 10 |
| Element, Pseudoelement | 1 |
Beispiel 1: CSS -Selektoren
Die folgenden Code üben verschiedene CSS -Selektoren in einem einzelnen Element aus, um den Spezifitäts -Hierarchieprozess in CSS zu verstehen.
Html
LinuxHint! Ein Tal der Tutorials
CSS
Im obigen CSS -Code versuchen drei Selektoren, die Hintergrundfarbe des H3 -Elements zu ändern. Der erste Selektor verwendet den Namen des Elements, während der zweite und der dritte Selektoren die Klasse und die ID des Elements H3 ausübt.
Ausgang
Als die Spezifität der Ausweis ist größer als die Klasse und das Element, Und so kam es dass der Ausweis würde als CSS -Selektor verwendet.
Beispiel 2: Verwenden von Hybrid -CSS -Selektoren
Es kann einen Fall geben, in dem Sie Klassen mit den gleichen Namen definieren müssen. In einem solchen Szenario werden die Hybrid -Selektoren ausgeübt, um ein bestimmtes Element eindeutig zu identifizieren. Das folgende Beispiel verwendet das ID und Klasse So erstellen Sie einen hybriden Selektor.
Html
LinuxHint! Ein Tal der Tutorials
Tutorials zu HTML, CSS, Java, JQuery und JavaScript
Willkommen bei LinuxHint
Ein qualitativ hochwertiger Inhaltsanbieter
Im obigen Code zwei divs werden erstellt und jedes Div hat H3 mit class = "Spec" Und P mit class = "Spec1". Elemente.
CSS
In den obigen CSS die #New .Die Spezifikation bezieht sich auf das H3 -Element der Div id = "Neu" .Die Spezifikation bezieht sich auf alle Elemente, die Class = "Spec" haben.
Beachten Sie die Berechnungen, die "#neu ".Spec ”und“.Spezifikation ” die folgende Punktzahl haben.
- #neu .Spec = 100+10 = 110
- .Spec = 10
Ausgang
Aus dem Ausgang wird beobachtet, dass der CSS -Selektor “#Div .Spezifikation ” wurde beladen, da seine Spezifität größer ist als “.Spezifikation ”.
Abschluss
Die Spezifitätshierarchie legt die Reihenfolge für CSS -Selektoren fest. Der Selektor mit höherer Spezifitätsbewertung hat eine höhere Priorität im Vergleich zum Selektor mit einer niedrigeren Spezifitätsbewertung. In diesem Artikel haben wir das Konzept der Spezifitätshierarchie demonstriert und die Grundlagen der definierten Spezifitätshierarchie beschrieben. Die Inline -Stile haben die höchste Spezifitätsbewertung und stehen somit oben in der Spezifitäts -Hierarchiebaum, gefolgt von ID, Klassen und Element. Darüber hinaus haben wir die Methode zur Berechnung des Spezifitätswerts von CSS -Selektoren bereitgestellt.