Der Anfängerleitfaden zur CSS-Spezifität

Haben Sie jemals versucht, eine CSS-Regel zu überschreiben, nur um festzustellen, dass sie nicht so funktioniert, wie sie sollte? Oder ist Ihnen aufgefallen, dass beim mehrfachen Targeting eines Elements mit unterschiedlichen CSS-Selektorkombinationen immer nur eine Regel gleichzeitig angewendet wird? Das liegt alles an CSS-Spezifitätsregeln.

CSS-Spezifitätsregeln können eines der verwirrendsten Konzepte sein, die es zu verstehen gilt, insbesondere für Anfänger.

Wenn Sie gerade erst mit CSS anfangen, denken Sie vielleicht, dass die neueste CSS-Regel die alte überschreiben sollte. Es scheint einfach, aber es funktioniert nicht immer so. Es hängt von der CSS-Spezifität ab, wann und welche CSS-Regel gelten soll.

Lassen Sie uns also aufschlüsseln, was CSS-Spezifität ist und wie man sie effizient einsetzt.

Was ist Spezifität in CSS?

Mit einfachen Worten, wenn Sie mehrere CSS-Selektoren für ein Element haben, wird derjenige mit dem höheren spezifischen Wert angewendet.

Unterschiedliche Selektoren haben unterschiedliche Gewichtungen und der Browser entscheidet, welcher für dieses Element am relevantesten ist.

Wie funktioniert es?

Die Spezifität eines Selektors kann in die folgenden vier Stufen eingeteilt werden:

1. Inline-Stil oder CSS
2. Ausweise
3. Klassen, Pseudoklassen und Attribute
4. Elemente oder Pseudoelemente

Inline-Stile oder CSS , bei denen CSS direkt auf das HTML-Dokument angewendet wird, sehen so aus <p> . Inline-Stile haben immer die höchste Spezifitätsstufe.

An zweiter Stelle in dieser Reihenfolge stehen IDs wie #content . Daher hat jeder Selektor, der eine ID verwendet, die zweithöchste Spezifitätsstufe.

Klassen , Pseudoklassen und Attribute sind die dritten in dieser Reihenfolge. Sie sehen so aus: .post , :hover bzw. [title] .

Elemente und Pseudoelemente haben den geringsten Wert. li und :after sind grundlegende Beispiele für ein Element und ein Pseudoelement.

Die Berechnung

Der Spezifitätswert kann mit folgender Richtlinie berechnet werden:

• Inline-Stil oder CSS: 1,0,0,0
• ID: 0,1,0,0
• Klasse oder Pseudoklasse und Attribut: 0,0,1,0
• Elemente und Pseudoelemente: 0,0,0,1
• Universalwähler (*): 0

Um das Spezifitätsniveau Ihres Selektors zu überprüfen, können Sie den Spezifitätsrechner verwenden.

Grundregeln der CSS-Spezifität

Nachdem Sie nun eine Vorstellung davon haben, wie Spezifität organisiert ist, lassen Sie uns einige allgemeine Regeln und Beispiele diskutieren!

Dies ist das Basis-HTML, das ich in meinen Beispielen verwenden werde. Hier habe ich eine kleine Liste in einem Container mit #content .

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

Regel 1

Wenn Sie zwei oder mehr gleiche Selektoren für ein Element haben, haben sie alle den gleichen Spezifitätswert, daher wird der niedrigere oder der letzte angewendet.

Im folgenden CSS-Snippet haben beide Selektoren die gleiche Spezifität, sodass die Farbe li gelb ist, da sie weiter unten in der Zeile platziert ist.

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

Regel 2

Wenn mehrere Selektoren für ein Element verwendet werden, wird der Selektor mit dem höheren spezifischen Wert angewendet.

Im folgenden Beispiel wird li von zwei verschiedenen Selektoren angesteuert, und beide wirken sich auf die Schriftfarbe aus. Welche Regel soll also gelten?

Wie im vorherigen Beispiel sollte im CSS-Reihenfolgekonzept das zweite gelten (also wäre die Farbe li grün), aber da .list li einen höheren Spezifitätswert als ul li hat, bleibt die Farbe rot.

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Regel 3

Wir haben gesehen, dass Klasse Elemente auf Spezifitätsebene überwiegen, jetzt wollen wir sehen, was mit einer ID passiert.

Im folgenden Beispiel haben wir eine Klasse und eine ID, die beide auf dasselbe Element abzielen und die Schriftfarbe beeinflussen. Wieder die gleiche Frage: Welche Regel soll gelten?

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Wie bereits erwähnt, hat ID einen höheren Spezifitätswert als Klasse, Attribute und Elemente, daher ist die Farbe blau. Ziel- ID immer für höheres Spezifitätsniveau.

Regel 4

!important überschreibt jeden Selektor mit jedem Spezifitätswert. Denken Sie jedoch daran, dass !important nicht überbeansprucht werden sollte, da es nicht als Best Practice für CSS gilt.

Wenn Sie der Autor Ihres CSS sind und keine bestehende Regel außer Kraft setzen, müssen Sie !important kaum verwenden.

Verwenden Sie !important nur, wenn Sie versuchen, das CSS eines anderen zu überschreiben, und Ihre Spezifität den vorherigen Selektor nicht überwiegen kann, insbesondere wenn Sie die Platzierungsreihenfolge Ihres CSS im HTML nicht steuern können.

Dies geschieht meistens während der Arbeit in WordPress, wo Sie viele CSS-Dateien finden, die bereits von verschiedenen Plugins und Themes hinzugefügt wurden.

Im Allgemeinen ist Plugin-CSS spezifisch für das Plugin und verwendet IDs, Inline-CSS oder sogar !important für eine höhere Spezifität, um CSS-Konflikte zu vermeiden. Um dieses CSS zu überschreiben, müssen Sie eine noch höhere Spezifität verwenden; Für diese Szenarien können Sie !important verwenden.

Im folgenden Beispiel erstelle ich die vorherigen Szenarien neu, wobei li mit verschiedenen CSS-Selektoren anvisiert wird, aber Sie können sehen, dass !important alle Regeln außer Kraft setzt und die Farbe gelb ist.

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important gibt Ihnen die Möglichkeit, Ihr CSS über jede Spezifitätsstufe hinaus zu erzwingen.

Sie müssen bei der Verwendung von !important vorsichtig sein, da Sie diese Regel nicht außer Kraft setzen können. Die einzige Möglichkeit, ein !important zu überschreiben, besteht darin, später im CSS ein anderes !important zu verwenden, sodass Ihr CSS leicht chaotisch aussehen kann, wenn Sie die Leistungsfähigkeit nicht verstehen.

Ein paar Ausnahmen

Elemente und Pseudoelemente haben die geringste Spezifität, aber es gibt ein paar interessante (und leicht verwirrende!) Ausnahmen. (Verwirrend, weil sie den Regeln, die wir gerade gesehen haben, nicht zu folgen scheinen.)

In diesem Beispiel sehen Sie :first-child (Pseudo-Klasse) und :first-line (Pseudo-Element). Wir haben gerade erfahren, dass Pseudo-Klassen eine höhere Spezifität haben als Pseudo-Elemente, daher sollte die Farbe der ersten Zeile des Absatzes grün sein, aber stattdessen wird sie rosa sein.

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

Sie denken vielleicht, dass die Reihenfolge hier ein Problem wäre, aber selbst das Ändern der Reihenfolge ändert nichts an der Ausgabe. Der Spezifitätsrechner zeigt ein anderes Bild als das Ergebnis.

Hier wird die Spezifität etwas verwirrend. Ich kann nur annehmen, dass der Grund für dieses Ergebnis darin besteht :first-line näher am Element liegt und wahrscheinlich als Inline-Stil behandelt wird. Sie können jsfiddle für ein weiteres Beispiel überprüfen.

Wie nutzt man Spezifität effizient?

Wenn Sie die CSS-Spezifitätsregeln verstehen, können Sie sie sehr effizient nutzen und Ihr CSS wiederverwendbar machen.

Angenommen, Sie möchten denselben .button verwenden, aber mit unterschiedlichen Hintergrundfarben, also richten Sie einen bestimmten Selektor ein: .red-block .button .

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

Wenn .button in einen .red-block Container eingeschlossen ist, ändert sich die Standardhintergrundfarbe der Schaltfläche in Rot.

CSS-Spezifität ist sehr nützlich, wenn Sie WordPress-Designs anpassen, wenn Sie versuchen, das CSS des Autors des Designs mit Ihrem eigenen zu überschreiben.

Häufige Fehler, die es zu vermeiden gilt

Einige Leute verwenden ultraspezifische Selektoren, was keine gute Praxis ist. Seien Sie nur so genau wie nötig. Dieses Code-Snippet zielt beispielsweise auf li ab, ist aber zu spezifisch.

 [css] div#content ul.list li{ color: purple; } [/css]

Wenn Sie mit Ihrem CSS zu spezifisch sind, wird es starr und schwieriger wiederzuverwenden. Sie könnten einfach .list li anstelle von div#content ul.list li schreiben, wodurch Ihr CSS sauberer wird.

Zusätzliche Ressourcen

• W3 org zur Spezifität
• CSS-Spezifitätsrechner
• IE-Fehler
• IE-Hack

Abschluss

Wie Sie sehen können, ist CSS-Spezifität ein wichtiges Werkzeug und jeder Frontend-Entwickler sollte es in seinem Toolkit haben. Ein klares Verständnis dieses Konzepts kann einen großen Beitrag dazu leisten, Sie zu einem guten Front-End-Entwickler zu machen.