Die Kaskade: Herkunft und Reihenfolge
Verstehen Sie, wie Stylesheet-Herkunft (User, Autor, Browser) und Quellreihenfolge die Priorität der Kaskade bestimmen.
Die Kaskade: Herkunft und Reihenfolge ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 die Kaskade?
Die Kaskade ist der Algorithmus, mit dem CSS bestimmt, welche Stildeklaration gewinnt, wenn mehrere Regeln auf dieselbe Eigenschaft desselben Elements abzielen. Dabei werden Herkunft, Wichtigkeit, Spezifität und Quellreihenfolge berücksichtigt.
Herkünfte in der Kaskade
CSS-Deklarationen stammen aus drei Herkünften, geordnet nach Priorität:
- User-Agent-Stylesheet – Standardwerte des Browsers
- Benutzer-Stylesheet – von Benutzern festgelegte benutzerdefinierte Stile (Barrierefreiheit)
- Autoren-Stylesheet – Ihre CSS-Dateien
Priorität der Kaskadenherkunft (normal)
Bei normalen Deklarationen (ohne !important) überschreiben Autorenstile Benutzerstile, die wiederum User-Agent-Stile überschreiben. Deshalb setzt sich Ihr CSS gegen die Standardwerte des Browsers durch.
Priorität der Kaskadenherkunft (!important)
Das Hinzufügen von !important kehrt die Reihenfolge der Herkünfte um:
- User-Agent-
!important - Benutzer-
!important– höchste Priorität (Barrierefreiheit) - Autoren-
!important
Deshalb können Überschreibungen für die Barrierefreiheit durch Benutzer (z. B. erzwungene Farben) nicht durch Autoren-CSS außer Kraft gesetzt werden.
Nach der Herkunft: Spezifität
Wenn zwei Deklarationen derselben Herkunft miteinander konkurrieren, bestimmt die Spezifität den Gewinner. Die höhere Spezifität gewinnt – darauf konzentrieren sich Entwickler beim Debuggen von CSS zuerst.
Nach der Spezifität: Quellreihenfolge
Wenn zwei Regeln dieselbe Spezifität haben, gewinnt diejenige, die später im Stylesheet erscheint. Das ist die Regel der „Quellreihenfolge“. Deshalb ist die Reihenfolge Ihrer @import-Anweisungen und @keyframe-Deklarationen wichtig.
@layer und Herkunft
CSS-Kaskadenschichten (@layer) führen einen neuen Kaskadenschritt zwischen Herkunft und Spezifität ein. Die Reihenfolge der Schichten bestimmt die Priorität. Eine Deklaration in einer späteren Schicht gewinnt unabhängig von ihrer Spezifität gegen eine Deklaration in einer früheren Schicht.
Die vollständige Priorität der Kaskade
Vollständige Prioritätsreihenfolge (höchste bis niedrigste):
- Herkunft + Wichtigkeit (!important Benutzer, !important Autor)
- Animationswerte
- CSS-Schichten (spätere Schichten gewinnen)
- Spezifität
- Quellreihenfolge
- Übergangswerte
Vererbung und Kaskade
Vererbung unterscheidet sich von der Kaskade. Geerbte Werte stammen aus dem berechneten Stil des übergeordneten Elements. Sie verlieren gegen jeden direkt angewendeten Wert, selbst wenn dieser aus einer Regel mit niedriger Spezifität stammt.
Quellreihenfolge gezielt einsetzen
Platzieren Sie spezifischere Stile (Varianten) nach den Basisstilen in Ihrem Stylesheet. Deshalb sollten Komponentendateien nach Reset- und Basisdateien importiert werden.
Debuggen der Kaskade
Im Styles-Panel von DevTools werden Regeln von der höchsten bis zur niedrigsten Priorität aufgelistet. Durchgestrichene Regeln haben die Kaskade verloren. Bewegen Sie den Mauszeiger über eine Regel, um ihre Quelldatei und Zeilennummer zum Debuggen anzuzeigen.
Schnelltest
Zwei Regeln zielen mit identischer Spezifität auf dieselbe Eigenschaft. Welche gewinnt?
Zusammenfassung
Die Kaskade löst Stilkonflikte anhand der Herkunft (Autor > Benutzer > Browser), anschließend der Wichtigkeit (!important kehrt die Reihenfolge um), der @layer-Reihenfolge, der Spezifität und der Quellreihenfolge. Wenn Sie die Kaskade verstehen, können Sie genau vorhersagen, welche Regel bei jedem Konflikt gewinnt – ohne weiteres Rätselraten.
Häufig gestellte Fragen
Ist die Lektion „Die Kaskade: Herkunft und Reihenfolge“ kostenlos?
Ja — der vollständige Text von „Die Kaskade: Herkunft und Reihenfolge“ 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 „Die Kaskade: Herkunft und Reihenfolge“?
Verstehen Sie, wie Stylesheet-Herkunft (User, Autor, Browser) und Quellreihenfolge die Priorität der Kaskade bestimmen. 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 2 von 4.
Wie lange dauert die Lektion „Die Kaskade: Herkunft und Reihenfolge“?
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