CSS- Spezifität
Was ist Spezifität?
Wenn es zwei oder mehr CSS-Regeln gibt, die auf dasselbe Element verweisen, gewinnt der Selektor mit dem höchsten Spezifitätswert, und seine Stildeklaration wird auf dieses HTML-Element angewendet.
Stellen Sie sich Spezifität als Bewertung/Rang vor, die bestimmen, welche Stildeklaration letztendlich auf ein Element angewendet wird.
Sehen Sie sich die folgenden Beispiele an:
Beispiel 1
In diesem Beispiel haben wir das Element "p" als Selektor verwendet und eine rote Farbe für dieses Element angegeben. Der Text wird rot:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Sehen Sie sich nun Beispiel 2 an:
Beispiel 2
In diesem Beispiel haben wir einen Klassenselektor (mit dem Namen „test“) hinzugefügt und eine grüne Farbe für diese Klasse angegeben. Der Text ist jetzt grün (obwohl wir für den Elementselektor "p" eine rote Farbe angegeben haben. Dies liegt daran, dass der Klassenselektor eine höhere Priorität hat:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Sehen Sie sich nun Beispiel 3 an:
Beispiel 3
In diesem Beispiel haben wir den ID-Selektor (mit dem Namen „demo“) hinzugefügt. Der Text ist jetzt blau, da der ID-Selektor eine höhere Priorität erhält:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
Sehen Sie sich nun Beispiel 4 an:
Beispiel 4
In diesem Beispiel haben wir einen Inline-Stil für das „p“-Element hinzugefügt. Der Text wird jetzt rosa sein, da der Inline-Stil die höchste Priorität hat:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
Spezifitätshierarchie
Jeder CSS-Selektor hat seinen Platz in der Spezifitätshierarchie.
Es gibt vier Kategorien, die den Spezifitätsgrad eines Selektors definieren:
- Inline-Stile – Beispiel: <h1 style="color: pink;">
- IDs - Beispiel: #navbar
- Klassen, Pseudoklassen, Attributselektoren - Beispiel: .test, :hover, [href]
- Elemente und Pseudoelemente - Beispiel: h1, :before
Wie berechnet man die Spezifität?
Prägen Sie sich ein, wie man die Spezifität berechnet!
Beginnen Sie bei 0, addieren Sie 100 für jeden ID-Wert, addieren Sie 10 für jeden Klassenwert (oder Pseudoklassen- oder Attributselektor), addieren Sie 1 für jeden Elementselektor oder Pseudoelement.
Hinweis: Der Inline-Stil erhält einen Spezifitätswert von 1000 und erhält immer die höchste Priorität!
Hinweis 2: Es gibt eine Ausnahme von dieser Regel: Wenn Sie die !important
Regel verwenden, werden sogar Inline-Stile überschrieben!
Die folgende Tabelle zeigt einige Beispiele zur Berechnung von Spezifitätswerten:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
Der Selektor mit dem höchsten Spezifitätswert gewinnt und tritt in Kraft!
Betrachten Sie diese drei Codefragmente:
Beispiel
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
Die Spezifität von A ist 1 (ein Elementselektor)
Die Spezifität von B ist 101 (eine ID-Referenz + ein Elementselektor)
Die Spezifität von C ist 1000 (Inline-Styling)
Da die dritte Regel (C) den höchsten Spezifitätswert (1000) hat, wird diese Stildeklaration angewendet.
Weitere Beispiele für Spezifitätsregeln
Gleiche Spezifität: die neueste Regel gewinnt - Wenn die gleiche Regel zweimal in das externe Stylesheet geschrieben wird, dann gewinnt die neueste Regel:
Beispiel
h1 {background-color: yellow;}
h1 {background-color: red;}
ID-Selektoren haben eine höhere Spezifität als Attributselektoren – Sehen Sie sich die folgenden drei Codezeilen an:
Beispiel
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
Die erste Regel ist spezifischer als die anderen beiden und wird daher angewendet.
Kontextselektoren sind spezifischer als Einzelelementselektoren – Das eingebettete Stylesheet ist näher an dem zu formatierenden Element. Also in folgender Situation
Beispiel
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
letztere Regel wird angewendet.
Ein Klassenselektor schlägt eine beliebige Anzahl von Elementselektoren - ein Klassenselektor wie .intro schlägt h1, p, div usw.:
Beispiel
.intro {background-color: yellow;}
h1 {background-color:
red;}
Der Universalselektor (*) und geerbte Werte haben eine Spezifität von 0 - Der Universalselektor (*) und geerbte Werte werden ignoriert!