Spezifität berechnen: Inline-Style, ID, Klasse, Element
Berechnen Sie Spezifitätswerte und sagen Sie voraus, welche Regel einen Stilkonflikt gewinnt.
Spezifität berechnen: Inline-Style, ID, Klasse, Element ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist Spezifität?
Die Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere Regeln auf dasselbe Element und dieselbe Eigenschaft abzielen. Sie wird als 4-teiliger Wert berechnet: (A, B, C, D), wobei A den höchsten und D den niedrigsten Wert darstellt.
Bestandteile der Spezifität
Die vier Spalten:
- A: Inline-Stile (style=""-Attribut) = 1,0,0,0
- B: ID-Selektoren (#id) = 0,1,0,0
- C: Klassen-Selektoren (.class), Attributselektoren, Pseudoklassen = 0,0,1,0
- D: Typ- (Element-)Selektoren, Pseudoelemente = 0,0,0,1
Beispiele für Spezifität
Spezifität berechnen:
<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
Header block — matches <code>#header</code>
<span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
<a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>Der Universalselektor hat keine Spezifität
Der Universalselektor *, Kombinatoren (+, >, ~, Leerzeichen) und die Pseudoklasse :where() tragen jeweils null (0,0,0,0) zur Spezifität bei.
Inline-Stile gewinnen
Inline-Stile (Attribut style="") haben die höchste Spezifität (1,0,0,0). Nur !important kann sie aus einer Stylesheet-Regel heraus überschreiben.
Spezifitätswerte vergleichen
Vergleichen Sie von links nach rechts. Die erste Spalte mit unterschiedlichen Werten bestimmt den Gewinner. (0,1,0,0) schlägt (0,0,99,99), weil die ID-Spalte sofort gewinnt.
Spezifität von :is(), :not() und :has()
:is(), :not() und :has() übernehmen die Spezifität ihres spezifischsten Arguments:
<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>Spezifität von nth-child
:nth-child(), :first-child, :hover und andere Pseudoklassen fügen jeweils (0,0,1,0) hinzu – eine Spezifität auf Klassenebene.
Spezifität von Pseudoelementen
::before, ::after, ::first-line usw. fügen jeweils (0,0,0,1) hinzu – eine Spezifität auf Elementebene. Sie befinden sich in der D-Spalte.
Spezifität ist keine Vererbung
Die Spezifität wird für jede Eigenschaft und jedes Element separat berechnet. Eine Regel mit höherer Spezifität gewinnt für eine bestimmte Eigenschaft – geerbte Werte von einem übergeordneten Element mit hoher Spezifität schlagen jedoch keine spezifischeren direkten Regeln für das untergeordnete Element.
Werkzeuge zum Berechnen der Spezifität
Verwenden Sie Online-Tools wie specificity.keegan.st oder die DevTools des Browsers, um die Spezifität zu überprüfen. In DevTools weisen durchgestrichene Stile im Styles-Panel darauf hin, dass eine spezifischere Regel gewonnen hat.
Schnelltest
Welcher Selektor hat die höhere Spezifität: #sidebar .link oder .nav .nav-item .nav-link.active?
Zusammenfassung
Spezifitätswerte haben das Format (A, B, C, D): Inline-Stile, IDs, Klassen/Attribute/Pseudoklassen, Elemente/Pseudoelemente. Vergleichen Sie von links nach rechts – die erste unterschiedliche Spalte gewinnt. :where() trägt immer null bei. Eine ID schlägt beliebig viele Klassen-Selektoren. Verwenden Sie das Styles-Panel von DevTools, um zu sehen, welche Regeln gewinnen und warum.
Häufig gestellte Fragen
Ist die Lektion „Spezifität berechnen: Inline-Style, ID, Klasse, Element“ kostenlos?
Ja — der vollständige Text von „Spezifität berechnen: Inline-Style, ID, Klasse, Element“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Spezifität berechnen: Inline-Style, ID, Klasse, Element“?
Berechnen Sie Spezifitätswerte und sagen Sie voraus, welche Regel einen Stilkonflikt gewinnt. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Spezifität berechnen: Inline-Style, ID, Klasse, Element“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Spezifität berechnen: Inline-Style, ID, Klasse, Element
- Die Kaskade: Herkunft und Reihenfolge
- !important: Wann und warum nicht
- Vererbung und die Eigenschaft all