Verschiedene Ebenen von CSS und die Priorität voreinander

8

Ich habe hier einen anständigen Artikel zu diesem Thema gelesen: Ссылка Es kam am höchsten von Google für den Suchbegriff css style sheets priorities heraus. Ich denke jedoch, dass die Website Sie falsch informiert und unvollständig ist! Kann jemand meinen Verdacht bestätigen?

1) Der benutzerdefinierte Stil ist die zweitniedrigste Priorität. Um andere Stile damit zu überschreiben, müssen Sie! Wichtig verwenden, um es auf den höchsten Wert zu verschieben. 2) Er erwähnt nicht die relativen Prioritäten von & lt; link & gt; gegenüber @import und @import innerhalb von & lt; link & gt;

Eine genauere Reihenfolge wäre (1 gewinnt über 2 usw.):

  1. Benutzerdefiniert (Browser-Einstellungen! wichtig - [nicht Google Chrome!])
  2. Inline-Stylesheet (Stilattribut im HTML-Knoten)
  3. Internes Stylesheet (& lt; Stil & gt; in & lt; Kopf & gt;)
  4. Externes Stylesheet (@import)
  5. Externes Stylesheet (& lt; link & gt;)
  6. Externes Stylesheet (@import innerhalb & lt; link & gt;)
  7. Benutzerdefiniert - (Browser-Einstellungen - [nicht Google Chrome!])
  8. Browser-Standard - (im Lieferumfang des Browsers enthalten)

Michael Bowers Pro CSS & amp; HTML Design Patterns ist auch hierfür eine gute Quelle. Aber inline wird nicht erwähnt.

Gibt es noch etwas anderes?

PS: Ich folgerte, wichtig war von 2-8. Also Benutzerdefiniert erscheint zweimal. Einmal mit wichtig, das zweite Mal ohne es. Benutzerdefiniert ist also im Wesentlichen die zweitniedrigste. Das! Wichtige kann natürlich auf jeder Ebene angewendet werden.

    
JGFMK 18.02.2011, 08:19
quelle

1 Antwort

8

Statt es als wichtigstes und unwichtigstes zu betrachten, sollten Sie es als Kaskadenordnung betrachten. Alle Stile werden angewendet, aber der zuletzt angewendete ist der, den Sie sehen. Stile werden in der folgenden Reihenfolge angewendet:

  1. Browserstandard
  2. Externes Stylesheet ( link oder @import )
  3. Internes Stylesheet
  4. Inline-Stil

Innerhalb eines der ersten drei Stile werden Stile von am wenigsten spezifisch bis am spezifischsten angewendet (dann von oben nach unten, wenn das spezifischste nicht bestimmt werden kann). Daher wird ein durch Tags ausgewählter Stil vor einem durch die Klasse ausgewählten Stil angewendet. Wenn sie sich nicht einig sind, welcher Stil angewendet werden soll, wird der von der Klasse ausgewählte Stil gewonnen. Es gibt keine Regel darüber, ob link oder @import zuerst angewendet werden sollte, daher werden sie zusammengemischt und es gilt die am wenigsten spezifische Regel.

!important bewirkt, dass ein weniger spezifischer Stil nach einem spezifischeren Stil angewendet wird und ein externer Stylesheet-Stil nach einem internen oder Inline-Stil angewendet wird. Ich würde jedoch davon abraten, wo immer möglich !important zu verwenden, da dies zu ziemlich verwirrenden Ergebnissen führen kann.

    
Nathan MacInnes 18.02.2011 10:12
quelle

Tags und Links