Wie bestimmt die Stylesheet-Reihenfolge die Vorrangstellung von CSS-Überschreibungen?

Stylesheet-Überschreibungsreihenfolge in CSS

In HTML können Stylesheets in der Kopfzeile verlinkt werden, um bestimmte Stile auf die Webseite anzuwenden. Die Reihenfolge dieser Stylesheets bestimmt, welche Stile Vorrang haben. Im beschriebenen Szenario sind zwei Stylesheets verknüpft: style.css und master.css.

Die Reihenfolge der Überschreibung folgt den Regeln der CSS-Kaskadierung. Die „letzte Zeile“-Regel in CSS legt fest, dass der zuletzt deklarierte Wert einer Eigenschaft Vorrang vor allen vorherigen Deklarationen hat. Diese Regel gilt jedoch nur innerhalb eines einzelnen Stylesheets. Wenn es um mehrere Stylesheets geht, gelten die folgenden Regeln:

Kaskadierung und Stylesheet-Referenzen

Das kaskadierende Element von CSS funktioniert bei Stylesheet-Referenzen nicht auf die gleiche Weise wie bei typische CSS-Funktionen. In Bezug auf Stylesheet-Referenzen bestimmt die Reihenfolge, in der die Stylesheets verknüpft sind, die Priorität. Das zuletzt verknüpfte Stylesheet überschreibt alle widersprüchlichen Regeln in zuvor verknüpften Stylesheets.

Spezifität und !important

Die Spezifität einer CSS-Regel definiert ihre Gewichtung. Regeln mit höherer Spezifität haben Vorrang vor Regeln mit geringerer Spezifität. Die Spezifität wird durch die Anzahl der im Selektor verwendeten IDs, Klassen und Elementnamen bestimmt. Die !important-Deklaration kann auch verwendet werden, um andere Regeln zu überschreiben.

Beispiel

Im gegebenen Szenario wird master.css nach style.css verlinkt. Vorausgesetzt, dass beide Stylesheets Regeln für das Body-Element enthalten, überschreiben die Regeln in master.css die Regeln in style.css aus folgenden Gründen:

• master.css wird zuletzt verlinkt.
• master.css enthält spezifischere Regeln (z. B. html, body:not(input="button")), die die allgemeineren Regeln instyles.css außer Kraft setzen (z. B. Körper).

Das obige ist der detaillierte Inhalt vonWie bestimmt die Stylesheet-Reihenfolge die Vorrangstellung von CSS-Überschreibungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!