# CSS-Selektor-Spezifitaetsrechner Berechnet CSS-Selektor-Spezifitaet, vergleicht Prioritaeten und gibt Hinweise gegen Kaskadenkonflikte > Kanonische Seite: https://elysiatools.com/de/tools/css-selector-specificity-calculator - **Kategorie:** Development - **Schlagwörter:** css, spezifitaet, selektor ## Überblick Geben Sie einen oder mehrere CSS-Selektoren ein. Das Tool berechnet die Spezifitaet (a, b, c), zeigt Prioritaeten und gibt Hinweise zur Konfliktreduzierung. ## Eingaben - **Selektoren** (textarea): .card .title #app .sidebar a:hover button.primary:is(:hover,:focus) ## Wann verwenden - Wenn CSS-Regeln nicht wie erwartet angewendet werden und Kaskaden-Konflikte vermutet werden. - Vor einem Refactoring von Stylesheets, um komplexe Selektoren durch flachere Hierarchien zu ersetzen. - Zur Überprüfung der Priorität von Drittanbieter-Bibliotheken gegenüber eigenen CSS-Definitionen. ## Funktionsweise - Geben Sie einen oder mehrere CSS-Selektoren zeilenweise in das Eingabefeld ein. - Das Tool zerlegt jeden Selektor in seine Bestandteile wie IDs, Klassen, Attribute und Elemente. - Die Spezifitätswerte (a, b, c) werden nach W3C-Standard berechnet und grafisch gegenübergestellt. - Sie erhalten Hinweise zur Priorität und Vorschläge, wie Sie unnötig hohe Spezifität reduzieren können. ## Anwendungsfälle - Debugging von CSS-Regeln, die fälschlicherweise von anderen Selektoren überschrieben werden. - Planung von Design-Systemen zur Einhaltung konsistenter Spezifitäts-Level. - Analyse der Auswirkungen von tief verschachtelten Selektoren aus SASS- oder LESS-Dateien. ## Häufig gestellte Fragen ### Was bedeuten die drei Zahlen (a, b, c) im Ergebnis? Sie repräsentieren die Anzahl der IDs (a), Klassen/Attribute/Pseudoklassen (b) und Elemente/Pseudoelemente (c). ### Wird die !important-Regel bei der Berechnung berücksichtigt? Nein, !important ist kein Teil der Selektor-Spezifität, sondern eine Deklaration, die die normale Kaskade überschreibt. ### Wie werden Pseudoklassen wie :is() oder :not() gewertet? Die Pseudoklassen selbst zählen nicht, aber der spezifischste Selektor innerhalb ihrer Argumente wird für die Berechnung herangezogen. ### Kann ich mehrere Selektoren gleichzeitig vergleichen? Ja, das Tool erlaubt die Eingabe mehrerer Selektoren, um deren Prioritäten direkt in einer Übersicht zu vergleichen. ### Warum gewinnt ein Selektor mit einer ID immer gegen Klassen? In der CSS-Hierarchie hat die ID-Spalte (a) eine höhere Wertigkeit als die Spalte für Klassen (b), unabhängig von der Anzahl der Klassen. ## Ähnliche Tools - [Tailwind-Farbpaletten-Sync](https://elysiatools.com/de/tools/tailwind-color-palette-sync): Gib HEX ein, wähle Namensschema (Skala 50–950 / Einzelname / Verschachtelung) und generiere das theme.extend.colors-Fragment für tailwind.config.ts mit WCAG AA/AAA-Leveln. Dark Mode optional. - [Cron-Job-Simulator](https://elysiatools.com/de/tools/cron-job-simulator): Simuliert zukuenftige Ausfuehrungen von einem oder zwei 5-teiligen Cron-Ausdruecken und markiert Ueberlappungen sowie zu dichte Plaene. - [HTTP-Statuscode-Referenz](https://elysiatools.com/de/tools/http-status-reference): Vollständige HTTP-Statuscode-Referenz (1xx–5xx) mit Bedeutung, typischen Szenarien und Wiederholungsratschlägen - [Responsiver Breakpoint-Visual-Diff](https://elysiatools.com/de/tools/responsive-breakpoint-diff): Rendert eine URL bei mehreren Breiten und zeigt Screenshots, Differenz-Heatmaps und Layout-Metriken direkt auf der Seite. - [CSS-Masonry-Layout-Generator](https://elysiatools.com/de/tools/css-masonry-layout-generator): Erzeugt reine CSS-Masonry-Layouts mit Breakpoints, Abstaenden und optionalen Skip-Selektoren - [OpenAPI-Diff-Breaking-Change-Detektor](https://elysiatools.com/de/tools/openapi-diff-breach-detector): Vergleicht OpenAPI- oder GraphQL-Schemas, markiert Breaking Changes und erstellt einen impact-orientierten Bericht fuer API-Teams - [Cashback-Rechner](https://elysiatools.com/de/tools/cash-back-calculator): Cashback-Rechner: Geben Sie Ausgabenkategorien ein (Name, monatliche Ausgaben, Cashback %), um monatliches und jährliches Cashback, den effektiven Satz und den Vergleich mit einer Flatrate-Karte zu berechnen, mit Diagramm. - [Kreditkarten-Rückzahlungsrechner](https://elysiatools.com/de/tools/credit-card-payoff): Kreditkarten-Rückzahlungsplaner: Geben Sie mehrere Karten ein (Name, Saldo, APR, Mindestzahlung %) und vergleichen Sie Lawine (hoher APR) vs. Schneeball (niedriger Saldo) bei Dauer, Zinsen und Ersparnis, mit Saldo-Kurven. ## Beispiele - [CSS-Selektor-Beispiele](https://elysiatools.com/de/samples/css-selectors): Sammlung von CSS-Selektor-Beispielen für Extraktions- und Analysetests - [Bulma CSS Framework Beispiele](https://elysiatools.com/de/samples/bulma): Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster - [CSS-Beispiele](https://elysiatools.com/de/samples/css-viewer-samples): Beispieldateien fuer den Browser-basierten CSS-Viewer - [Milligram CSS Framework Beispiele](https://elysiatools.com/de/samples/milligram): Milligram CSS-Framework-Beispiele einschließlich Typografie, Formulare, Grids und Komponenten ## Verwandte Inhalte - [CSS-Arbeit, Layout und Kaskade](https://elysiatools.com/de/hubs/css-authoring-layout-and-cascade-workflows): Erstellen und prüfen Sie CSS mit Formatierung, Selektor-Diagnose, responsiven Snippets, visuellen Effekten und Render-Checks.