Spezifität in CSS
CSS kann auf mehrere Arten auf ein beliebiges Element angewendet werden (Inline, intern und extern). Was ist, wenn wir Stile mit unterschiedlichen Mitteln auf dasselbe Element anwenden (mit Inline, mit ID oder Klasse usw.)? In einem solchen Fall tritt das CSS -Spezifitätsphänomen in die Praxis um und wählt den CSS -Selektor aus, der den höchsten Wertspezifitätswert aufweist. Das Konzept der Spezifität ist der Vorrang des Bedieners in Programmiersprachen.
In Anbetracht der Bedeutung der Spezifität zeigt dieser Leitfaden kurz die Arbeit und Verwendung der Spezifität in CSS.
- Wie CSS -Spezifität funktioniert
- Spezifitätswert von CSS -Selektoren
Wie Spezifität in CSS funktioniert
Die Arbeit der Spezifität hängt von den CSS -Selektoren oder der Art der CSS ab, die Sie verwenden. In diesem Abschnitt werden der Spezifitätsvergleich auf folgende Weise berücksichtigt:
- Inline -CSS, internes CSS und externes CSS
- CSS -Selektoren (ID, Klasse, Pseudoklassen, Pseudoelemente usw.)
Das Stylesheet kann inline, intern oder extern sein, und das folgende ist das Spezifitätsniveau dieser Stilblätter.
Inline -CSS> Internal CSS> externes CSSAus der obigen Gleichung wird der Schluss gezogen, dass das Inline -CSS im Vergleich zum internen und externen CSS die höchste Spezifität aufweist.
Lassen Sie uns nun untersuchen, wie Stile ausgewählt werden, wenn mehrere CSS -Selektoren für dasselbe Element verwendet werden. Die Spezifität verschiedener CSS -Selektoren wird durch die folgende Gleichung definiert.
Inline> Identifier (ID)> Klassen/Pseudoklassen, Attribute> Elemente/PseudoelementeBisher wurde der theoretische Vergleich zurückgezogen. Lassen Sie uns einen quantitativen Vergleich des Spezifitätswerts haben, und dieser Spezifitätswert wird von den Browsern folgendermaßen berechnet.
Dazu werden die CSS -Selektoren angewendet, um einen bestimmten Wert zu erhalten. So dass der Selektor der kleinsten Spezifität (Element) 1 zugewiesen ist und der Selektor der höchsten Spezifität (Inline) 1000 zugewiesen ist. Die folgende Tabelle bezieht sich auf den Spezifitätswert verschiedener CSS -Selektoren.
| CSS -Selektor | Spezifität |
|---|---|
| Im Einklang | 1000 |
| Kennung (ID) | 100 |
| Klassen, Pseudoklassen, Attribute | 10 |
| Elemente/Pseudoelemente | 1 |
Wir haben einige Beispiele geübt, die aus dem in der obigen Tabelle bereitgestellten Konzept zurückgezogen werden.
| CSS -Selektoren | Beispiel | Spezifitätswert |
|---|---|---|
| Im Einklang | 1000 | |
| Element mit ID | H1#ID | 100+1 = 101 |
| Element mit Klasse | H1.Klasse | 10+1 = 11 |
| Element | H1 | 1 |
| Element mit ID und Klasse | H1#ID.Klasse | 1+100+10 = 111 |
| Mehrere Klassen | .Klasse 1.Klasse 2 | 10+10 = 20 |
Mit Hilfe der in den oben genannten Tabellen bereitgestellten Informationen hätten Sie das Konzept der Spezifität in CSS besser verstanden. Lassen Sie sie sie anhand der folgenden Beispiele ebnen
Beispiel 1: Verwenden Sie mehrere CSS -Selektoren für ein Element
Dieses Beispiel übt verschiedene CSS -Selektoren aus, um das "P" -Element zu stylen.
Html
Verwenden des Spezifitätskonzepts
Im obigen HTML -Code ist der Absatz zugewiesen id = "eins" und class = "spec".
CSS
In den obigen CSS die "Klasse", "ID" und "Element" werden als CSS -Selektoren für verwendet "P". Jeder CSS -Selektor beabsichtigt, die Hintergrundfarbe der Hintergrundfarbe zu ändern "P" Element.
Ausgang
Aus der Ausgabe wird beobachtet, dass die Hintergrundfarbe himmelblau ist, die von der festgelegt wurde id = "eins" des Elements "P".
Beispiel 2: Verwenden von Selektoren derselben Spezifität
Es besteht die Möglichkeit, dass ein Element von CSS -Selektoren mit der gleichen Spezifitätsbewertung angesprochen wird. In diesem Fall wird das Auftreten des CSS -Selektors berücksichtigt, und der spätere Selektor wird zum Styling ausgewählt.
Dieses Beispiel zeigt das gleiche Szenario mit dem folgenden Code.
Html
Verwenden der Selektoren mit der gleichen Spezifität
CSS
Im obigen CSS -Code werden zwei ID -Selektoren mit verschiedenen Stilen verwendet. Die frühere #Spec hat nur Hintergrund -Farbeigenschaften, während die #spec Das Auftreten später hat mehrere CSS -Eigenschaften.
Ausgang
Aus dem Ausgang wird beobachtet, dass die id = "Spec" Der seitlich auftretende Selektor wird ausgewählt und die davon enthaltenen Eigenschaften werden auf das Absatzelement angewendet.
Abschluss
Wenn mehrere CSS -Selektoren versuchen, ein Element zu beeinflussen, entscheidet das Spezifitätsphänomen, welcher Stil angewendet werden soll. Die Spezifität in CSS spielt die Schlüsselrolle, da komplexe Stylesheets für jedes Element mehrere Selektoren enthalten können. Dieser Artikel zeigt das Konzept der Spezifität in CSS. Darüber hinaus erfahren Sie, wie der Spezifitätswert eines CSS -Selektors berechnet wird. Mit Hilfe davon können Sie die Spezifitätsbewertung berechnen, bevor Sie einen CSS -Selektor verwenden.