Selektor | Beispiel | Spezifität (Punkte) |
Globalselektor | * | |
Elementselektor | body, div, p, b, a | 1 |
Klassenselektor | .grau, .name | 10 |
Pseudoklasse | a:link, a:hover, input:focus, #hier:active | 1 + 10 = 11 |
Pseudoelemente | :first-letter, :after, :lang | 1 + 10 = 11 |
ID-Selektoren | #leinwand, #kopf, #fusszeile | 100 |
Nachfahren | #leinwand #kopf h1, ul li a, ul li ul li a | Addition der Einzelwerte (201, 3, 5) |
Kinder | html > body | Addition der Einzelwerte (1 + 1) |
Geschwister (Nachbarn) | h1 + h2 | Addition der Einzelwerte (1 + 1) |
Folgeselektoren | h1 ~ h2 | Addition der Einzelwerte (1 + 1) |
Attributsselektoren | abbr[title], a[href^="mailto"] | 1 + 1 |
Style als HTML Attribut | style="color: red" | 1000 |
Die Regel !important setzt die Reihenfolge sowie die Spezifität außer Kraft.
Ein mit !important gekennzeichneter Wert setzt sich immer durch.