CSS Specificity Calculator

CSS-Spezifität ist der Algorithmus, den Browser verwenden, um zu bestimmen, welche CSS-Regel gilt, wenn mehrere Regeln dasselbe Element ansprechen. Jeder CSS-Selektor hat einen Spezifitätswert, der aus seinen Komponenten berechnet wird: Inline-Styles haben die höchste Spezifität, gefolgt von IDs, dann Klassen/Attributen/Pseudo-Klassen und schließlich Elementen/Pseudo-Elementen. Bei einem Konflikt zwischen zwei Regeln gewinnt die mit der höheren Spezifität - unabhängig von der Quellreihenfolge.

Spezifität wird als Tupel von vier Werten dargestellt: (inline, IDs, Klassen, Elemente). Zum Beispiel hat #header .nav a die Spezifität (0, 1, 1, 1) - eine ID, eine Klasse, ein Element. div.container > ul li a.active hat die Spezifität (0, 0, 2, 4) - zwei Klassen und vier Elemente. Das Verständnis von Spezifität ist essentiell für das Debuggen von CSS-Kaskaden-Problemen und das Schreiben wartbarer Stylesheets.

Dieser CSS-Spezifitäts-Rechner ermöglicht es Ihnen, Selektoren einzugeben und sofort ihre Spezifitätswerte zu sehen, mehrere Selektoren nebeneinander zu vergleichen und zu verstehen, welche Regel in einem Konflikt gewinnt. Er ist ein unverzichtbares Debugging-Tool für CSS-Entwickler, die mit komplexen Stylesheets arbeiten. Alle Berechnungen finden in Ihrem Browser statt.

1. CSS-Selektor eingeben — Geben Sie einen beliebigen CSS-Selektor ein oder fügen Sie ihn ein, um seine Spezifität aufgeschlüsselt nach ID-, Klassen- und Element-Komponenten zu sehen.
2. Selektoren vergleichen — Geben Sie mehrere Selektoren ein, um ihre Spezifitätswerte nebeneinander zu vergleichen und zu bestimmen, welcher gewinnt.
3. Aufschlüsselung verstehen — Jeder Selektor zeigt seine Spezifität als (IDs, Klassen, Elemente) zusammen mit dem Gesamtgewicht, sodass Sie leicht erkennen können, warum ein Selektor einen anderen überschreibt.
4. Kaskaden-Probleme debuggen — Wenn Ihr CSS nicht wie erwartet angewendet wird, fügen Sie sowohl den erwarteten als auch den tatsächlich gewinnenden Selektor ein, um zu sehen, welcher eine höhere Spezifität hat.

• Sofortige Berechnung — Spezifität wird in Echtzeit während der Eingabe berechnet, ohne Verzögerung oder Tastendruck.
• Visuelle Aufschlüsselung — Sehen Sie die Spezifität in ihre drei Komponenten zerlegt: IDs (am spezifischsten), Klassen/Attribute/Pseudo-Klassen und Elemente/Pseudo-Elemente.
• Selektor-Vergleich — Vergleichen Sie mehrere Selektoren, um zu bestimmen, welcher in einem Spezifitätskonflikt gewinnt.
• Komplexe Selektor-Unterstützung — Verarbeitet Kombinatoren (>, +, ~), Pseudo-Klassen (:hover, :nth-child), Pseudo-Elemente (::before), Attribut-Selektoren und mehr.
• Lernwerkzeug — Hilft Entwicklern, Spezifitätsregeln durch sofortiges visuelles Feedback zu erlernen und zu verinnerlichen.
• 100% clientseitig — Alle Berechnungen finden in Ihrem Browser statt. Keine Daten werden an einen Server gesendet.

• Style-Überschreibungen debuggen — Wenn eine CSS-Regel nicht angewendet wird, vergleichen Sie die Spezifität ihres Selektors mit der gewinnenden Regel, um die Kaskade zu verstehen.
• CSS refactoren — Bewerten Sie die Selektor-Spezifität über Ihr gesamtes Stylesheet, um übermäßig spezifische Selektoren zu identifizieren, die die Wartung erschweren.
• Code Review — Prüfen Sie bei Code Reviews, ob neue Selektoren angemessene Spezifitätsstufen haben, um Kaskaden-Probleme zu vermeiden.
• CSS lernen — Verwenden Sie den Rechner als Lernwerkzeug, um Spezifitätsregeln zu verstehen und Intuition für die CSS-Kaskade aufzubauen.
• !important vermeiden — Anstatt zu !important zu greifen, verwenden Sie den Rechner, um die richtige Spezifitätsstufe zu finden, die konfliktauslösende Regeln natürlich überschreibt.