zur Startseite zur Hauptnavigation zum Hauptinhalt zum Suchformular
MySign
Neuhardstrasse 38
4600 Olten, CH
+41 62 836 80 10,
info@mysign.ch

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

http://cssspecificity.com

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.

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/#css-specificity-an-overview

Pascal Steiner
19.10.2017


Kommentare