CSS-Dokumente

CSS-Hierarchie

23/01/2022
CSS Hierarchy

CSS-Vorrang ist der hierarchische Vorrang aller CSS, die HTML-Tags zugewiesen sind.

Was sind die Prioritäten von CSS-Regeln, die zum Formatieren von HTML-Tags verwendet werden? Wann und in welchen Situationen wird das Konzept !wichtig verwendet?

Konzepte, die die CSS-Prioritätsreihenfolge beeinflussen

  • Inline-CSS (CSS wird direkt auf das Tag angewendet)
  • Internes CSS (CSS wird zwischen <style></style>-Tags auf derselben Seite angewendet.)
  • Externes CSS (CSS wird extern angewendet (aus dem Dateipfad oder einer anderen Website) mit dem <link>-Tag.)
  • Class
  • Id
  • !important

Id > Class > HTML Tag

Welche CSS-Eigenschaften von Class-, ID- und HTML-Tags haben Vorrang?

Wenn ein HTML-Tag eine ID, eine Class als internen CSS-Typ und eine CSS-Regel hat, die direkt auf das HTML-Tag angewendet wird, wendet der Browser die CSS-Vorrangreihenfolge ID > Class > HTML-Tag an.

Inline > Intern > Extern CSS-Priorität

Bei der Anwendung externer, interner und Inline-CSS-Typen lautet die CSS-Prioritätsreihenfolge auf der Browserseite Inline > Intern > Extern.

Hinweis: Externer CSS-Code kann auf der Registerkarte CSS angezeigt werden.

Diese Priorisierung gilt jedoch nur, wenn jeder CSS-Implementierungstyp auf die gleiche Weise verwendet wird. Beispielsweise müssen bei der Verwendung von externem und internem CSS beide auf das ID- oder class- oder HTML-Tag angewendet werden, auch die Prioritätsreihenfolge ändert sich in verschiedenen Fällen.