Welche Arten von CSS-Stylesheets gibt es? Was ist Selektorpriorität?-Front-End-Fragen und Antworten-php.cn

Es gibt drei Arten von CSS-Stylesheets: Inline-Stylesheets, interne Stylesheets und externe Stylesheets. Die Selektorpriorität ist: „Universalselektor>Elementselektor>Klassenselektor>Attributselektor>Pseudoklasse>ID-Selektor>Inline-Stil“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Welche Arten von CSS-Stylesheets gibt es?

Je nachdem, wo CSS-Stile geschrieben werden (oder wie sie eingeführt werden), können CSS-Stylesheets in die folgenden drei Kategorien unterteilt werden:

1. Inline-Stylesheets

Inline-Stil bedeutet die Platzierung von CSS-Stilen direkt innerhalb der Codezeile Im Tag wird es normalerweise in das Stilattribut des Tags eingefügt. Da der Inline-Stil direkt in das Tag eingefügt wird, ist dies der direkteste Weg und auch der umständlichste Stil zum Ändern .

Beispiel:

rrree 2. Internes Stylesheet

Das interne Stylesheet ist im -Tag enthalten.

Wenn ein Webdokument mehrere -Tags enthält, bedeutet dies, dass das Dokument mehrere interne Stylesheets enthält.

Beispiel:

行内元素，控制段落-1

Nach dem Login kopieren 3. Externes Stylesheet

Wenn der CSS-Stil in einer Datei außerhalb des Webseitendokuments platziert wird, wird er als externes Stylesheet bezeichnet.

Eigentlich ist ein externes Stylesheet nur eine Textdatei mit der Erweiterung .css. Wenn Sie den CSS-Stilcode in eine Textdatei kopieren und als CSS-Datei speichern, handelt es sich um ein externes Stylesheet.

Verwenden Sie auf der HTML-Seite das Tag . Der spezifische Einführungscode lautet wie folgt:

div { color: blue; font-size: 16px; } Nach dem Login kopieren Priorität mehrerer Stylesheets:

interner Stylesheet-Stil Sheet > Externes Stylesheet Der für das Element relevanteste Attributwert wird ermittelt und auf dieses Element angewendet. Die Priorität wird nur durch die aus Selektoren bestehenden Matching-Regeln bestimmt.

Priorität ist eine einer bestimmten CSS-Deklaration zugewiesene Gewichtung, die durch den Wert jedes Selektortyps im passenden Selektor bestimmt wird.

Was ist die Selektorpriorität?

Das Folgende ist eine Liste von Selektoren mit zunehmender Priorität:

Universal-Selektor (*)

Element-(Typ-)Selektor Klassen-Selektor Attribut-Selektor Pseudoklasse ID-Selektor Inline Styles !important-Regelausnahmen Wenn die !important-Regel auf eine Style-Deklaration angewendet wird, überschreibt die Style-Deklaration alle anderen Deklarationen in CSS, unabhängig davon, ob sie in der Deklarationsliste enthalten sind Die Verwendung von !important hat nichts mit Prioritäten zu tun, da dadurch die ursprünglichen Kaskadenregeln Ihres Stylesheets geändert werden, was das Debuggen erschwert. Einige Faustregeln:

Immer

Zur Optimierung sollten Sie die Stilregelpriorität verwenden, um das Problem zu lösen, statt !important Nur , nur wenn Sie die Site-weit überschreiben müssen oder externes CSS (Verwenden Sie beispielsweise !important !important Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important Never 永远不要在全站范围的 css 上使用 !important Never 永远不要在你的插件中使用 !important Nie auf bestimmten Seiten von ExtJs oder YUI, auf die verwiesen wird). breites CSS. Verwenden Sie niemals !important in Ihren Plugins

Erklärung:

1. Inline-Stylesheets haben eine maximale Gewichtung von 1000; Die Gewichtung des Selektors beträgt 100 3. Die Gewichtung des Klassenselektors „Klasse“ beträgt 10 4. Die Gewichtung des HTML-Tag-Selektors beträgt 1 Verwenden Sie die Gewichtung des Selektors zum Berechnen und Vergleichen. em wird blau angezeigt Das Beispiel lautet wie folgt: https://c.runoob.com/codedemo/3048 CSS-Prioritätsregel: A. Jeder Selektor hat eine Gewichtung, und je größer die Gewichtung, desto höher die Priorität; B. Wenn die Gewichtungen gleich sind, ist die Stylesheet-Einstellung, die später angezeigt wird, besser als die Stylesheet-Einstellung, die angezeigt wird erscheint zuerst; C Die Regeln des Erstellers sind höher als die des Betrachters: Das heißt, der vom Webseitenautor festgelegte CSS-Stil hat eine höhere Priorität als der vom Browser festgelegte Stil. D Der geerbte CSS-Stil ist nicht so gut wie der später angegebene CSS-Stil; E In den Gruppenattributeinstellungen haben die mit „!important“ gekennzeichneten Regeln die höchste Priorität: https://c.runoob.com /codedemo/3049 Ergebnis: wird unter Firefox in Blau angezeigt; unter IE 6 wird es in Rot angezeigt