CSS Specificity
CSS Specificity
Was ist CSS Specificity:
CSS-Specificity ist die Gewichtung der verschiedenen Selektoren, die man in seinem Code hat. Dies kann bei falscher Anwendung schwerwiegende Folgen haben. Darstellungen könnten falsch oder gar nicht angezeigt werden. Mit der richtigen Reihenfolge der Selektoren wird dies verhindert und man hat die gewünschte Darstellung.
Der Browser hat eine bestimmte Art und Weise, wie er die Selektoren ausliest und wenn die Gewichtung nicht richtig verteilt ist, überschreibt er manchmal leider etwas.
Specificity berechnen:
Die Gewichtung ist einfach. Je höher der Wert, desto wichtiger ist dessen Anweisung.
- Universal-Selektor = 0-0-0
- Element = 0-0-1
- Klasse = 0-1-0
- Attribut = 0-1-0
- ID = 1-0-0
- Inline Style = 1-0-0-0
- !important = 1-0-0-0-0
https://css-tricks.com/specifics-on-css-specificity/#article-header-id-1
Anwendungsbeispiele:
Wenn mehrere Selektoren auf ein Element zugreifen, wird der Selektor mit der höheren Spezifität ausgewählt.