CSS-Spezifität
Die CSS-Spezifität bestimmt, welche Regel angewendet wird, wenn mehrere Styles auf dasselbe Element zutreffen. Sie ist entscheidend, um Konflikte in Stylesheets zu verstehen.
Grundbegriffe
Die Spezifität ist ein Zahlenwert, den der Browser zur Gewichtung der Regeln verwendet. Elemente, Klassen und IDs haben unterschiedliche Punktwerte.
Das folgende Beispiel zeigt, wie sich Element-, Klassen- und ID-Selektoren durchsetzen.
Punktesystem
Die Spezifitätswerte setzen sich aus verschiedenen Kategorien zusammen: Inline-Stile, IDs, Klassen und Elemente. Je höher die Punktzahl, desto stärker ist die Regel.
| Selektor | Spezifitätswert |
|---|---|
| Element selector (p, div) | 0-0-1 |
| Class selector (.class) | 0-1-0 |
| ID selector (#id) | 1-0-0 |
| Inline style | 1-0-0-0 (highest) |
Die Verwendung von !important
Die Deklaration !important überschreibt alle Spezifität, daher sollte sie mit Vorsicht eingesetzt werden. Verwende sie nur, wenn es wirklich keine andere Lösung gibt.
Tipps zur Spezifität
Das richtige Management der Spezifität hilft, den Code sauber zu halten und fehlerhafte Darstellungen zu vermeiden. Hier einige praktische Ratschläge:
- Vermeide Selektoren mit zu hoher Spezifität, damit ein Überschreiben einfacher bleibt.
- Strukturiere logisch und verwende lieber Klassen als IDs.
- Halte die Verwendung von !important auf ein Minimum, um unübersichtliche Konflikte zu vermeiden.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.