In welcher Reihenfolge überschreiben CSS-Stylesheets?

157

In einem HTML-Header habe ich Folgendes:

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.cssist mein seitenspezifisches Blatt. master.cssist ein Blatt, das ich in jedem meiner Projekte verwende, um die Standardeinstellungen des Browsers zu überschreiben. Welches dieser Stylesheets hat Priorität? Beispiel: erstes Blatt enthält spezifische

body { margin:10px; }

Und zugehörige Grenzen, aber die zweite enthält meine Resets von 

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

Funktioniert das kaskadierende Element von CSS im Wesentlichen in Bezug auf Stylesheet-Referenzen genauso wie in typischen CSS-Funktionen? Bedeutet das, dass die letzte Zeile die angezeigte ist?

css overriding stylesheet ian5v
quelle
Ich habe gerade festgestellt, dass dies besser für Webmaster geeignet ist. Gibt es einen besseren Ort, um dies zu posten?
ian5v
10
Genau hier ist gut.
Blender
4
body:not(input="button")ist übrigens kein gültiger Selektor. Sie wollten es wahrscheinlich aufteilen body, input:not([type="button"]).
BoltClock
Das ist interessant. Ich glaube nicht, dass ich eine solche Syntax schon einmal gesehen habe. Ich bin noch neu, aber diese doppelten Klammern sind mir fremd.
ian5v
Diese Klammern gelten für Attributselektoren: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors @topic: Wahrscheinlich möchten Sie die Reihenfolge der Stylesheets ändern: Ihr General master.csssollte zuerst laden, dann ist es viel einfacher, sie zu überschreiben die Meisterstile in Ihrem styles.css.
Grill

Antworten:

163

Die Regeln für die Kaskadierung von CSS-Regeln sind komplex - anstatt zu versuchen, sie schlecht zu paraphrasieren, verweise ich Sie einfach auf die Spezifikation:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

Kurz gesagt: Spezifischere Regeln überschreiben allgemeinere. Die Spezifität wird basierend darauf definiert, wie viele IDs, Klassen und Elementnamen betroffen sind und ob die !importantDeklaration verwendet wurde. Wenn mehrere Regeln derselben "Spezifitätsstufe" existieren, gewinnt die zuletzt erscheinende.

Dämmerung -inaktiv-
quelle
1
Dann gibt es keine spezifische Regel, in welcher Reihenfolge Stylesheets geladen werden? Ich verstehe, wie CSS in Bezug auf die Spezifität angezeigt wird, aber dann gehe ich davon aus, dass mein Masterblatt geladen wird, sofern es nicht überschrieben wird.
ian5v
11
Nimmt tatsächlich !importantdirekt an der Kaskade teil und hat nichts mit Spezifität zu tun. Die Spezifität bezieht sich auf Selektoren, während !importantsie bei Eigenschaftsdeklarationen verwendet wird. (Sie haben also Recht, wenn Sie sagen, dass die Regeln komplex sind !;)
BoltClock
2
Laden Stylesheets also genauso wie Elemente, wobei die letzten Vorrang haben, wenn sie dieselbe Spezifität haben?
ian5v
3
@iananananan: Grundsätzlich sieht der Browser CSS nie in Bezug auf einzelne Stylesheets. Wenn mehrere Stylesheets vorhanden sind, werden sie alle so behandelt, als wären sie ein riesiges Stylesheet, und die Regeln werden entsprechend bewertet.
BoltClock
2
@ user34660 Der Kommentar von BoltClock stammt aus der Perspektive des CSS-Stils. Sie haben Recht, dass die Stylesheets im DOM getrennt gehalten werden, aber diese Trennung hat keinen Einfluss darauf, wie diese Stile auf irgendetwas angewendet werden.
Abenddämmerung -inaktiv-
31

Der spezifischste Stil wird angewendet:

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

Wenn alle Selektoren dieselbe Spezifität haben, wird die neueste Dekleration verwendet:

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

In Ihrem Fall body:not([input="button"])ist spezifischer, so dass seine Stile verwendet werden.

Mixer
quelle
1
Siehe meinen Kommentar zur Frage zu diesem letzten Selektor.
BoltClock
1
Die Spezifitätsregel erschwert die Arbeit, wenn nicht bearbeitbares Stylesheet überschrieben werden muss!
Ari
23

Ordnung ist wichtig. Der zuletzt deklarierte Wert des mehrfachen Auftretens wird übernommen. Bitte sehen Sie das gleiche, das ich ausgearbeitet habe: http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

Wenn Sie die Reihenfolge von .test{}ändern, können Sie sehen, dass der HTML-Code den Wert des zuletzt in CSS deklarierten Werts annimmt

Roy MJ
quelle
3
Sie sollten also zuletzt das spezifischste CSS hinzufügen.
Live-Liebe
17

Das zuletzt geladene CSS ist THE MASTER, das alle CSSs mit denselben CSS-Einstellungen überschreibt

Beispiel:

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

Die Ausgabe für das h1-Tag hat die Schriftgröße: 30px;

Doodl
quelle
1
Hallo. In meinem Fall wird die zuerst definierte .csszuletzt geladen. Werden sie angewendet, um sie zu laden oder um sie zu definieren?
Eugen Konkov
Danke, das ist genau die Erklärung, nach der ich gesucht habe.
HunterTheGatherer
7

Versuchen wir, die Kaskadenregel anhand eines Beispiels zu vereinfachen. Die Regeln gelten allgemeiner.

  1. Wendet die Regel der ersten ID an (über Klasse und / oder Elemente unabhängig von der Reihenfolge)
  2. Wendet Klassen unabhängig von der Reihenfolge auf Elemente an
  3. Wenn keine Klasse oder ID vorhanden ist, werden die generischen angewendet
  4. Wendet den letzten Stil in der Reihenfolge (Deklarationsreihenfolge basierend auf der Ladereihenfolge der Datei) für dieselbe Gruppe / Ebene an.

Hier ist der CSS- und HTML-Code;

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

Hier ist der CSS-Stil

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

Hier ist das Ergebnis. Unabhängig von der Reihenfolge der Stildateien oder der Stildeklaration id="important"gilt am Ende (beachten Sie dieclass="deadline" zuletzt deklarierte, hat jedoch keine Auswirkung).

Das <article>Element enthält ein <aside>Element, jedoch wird der zuletzt deklarierte Stil wirksam, in diesem Fall article h2 { .. } für das dritte h2-Element.

Hier ist das Ergebnis auf IE11: (Nicht genügend Rechte zum Posten des Bildes) DarkBlue: Houston Chronicle News, DarkGreen: Neueste Entwicklungen in Ihrer Stadt, Lila: Houston Local Advertisement Section, Schwarz: Nächster Abschnitt

Geben Sie hier die Bildbeschreibung ein

Kagan Agun
quelle
6

Dies hängt sowohl von der Ladereihenfolge als auch von der Spezifität der tatsächlichen Regeln ab, die auf jeden Stil angewendet werden. In Anbetracht des Kontextes Ihrer Frage möchten Sie zuerst Ihren allgemeinen Reset und dann die seitenspezifische laden. Wenn Sie dann immer noch nicht den beabsichtigten Effekt sehen, müssen Sie die Spezifität der beteiligten Selektoren untersuchen, wie andere bereits betont haben.

prodigitalson
quelle
2

EDIT: Apr 2020, laut Kommentar von @ LeeC, ist dies nicht mehr der Fall

Ja, es funktioniert genauso, als wären sie auf einem Blatt:

Load Order Matters!

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

Im obigen Code gibt es keine Garantie, master.cssdie danach geladen wird styles.css. Wenn master.csses schnell geladen wird und styles.csseine Weile dauert, styles.csswird es daher zum zweiten Stylesheet und zu allen Regeln mit der gleichen Spezifitätmaster.css werden überschrieben.

Am besten fassen Sie alle Ihre Regeln vor der Bereitstellung auf einem Blatt zusammen (und minimieren sie).

n_i_c_k
quelle
Betrachten Sie den Fall für alternative, nahezu identische Stylesheets, die aus dem Abschnitt <head> einer Seite geladen werden und eines mit Attributen für bedingte Medien zum Laden eines für Smartphones und Tablets spezifischen Stylesheets enthalten. In diesem Fall muss die im Medium angegebene Logik für jedes Stylesheet streng exklusiv sein, wenn die Ladereihenfolge unbestimmt ist.
Lindsay Haisley
@n_i_c_k Ihre Antwort ist falsch. Auf die Reihenfolge der Deklaration kommt es an, nicht auf die Ladereihenfolge . Ich habe dies gerade mit Fiddler getestet, indem ich den Download von master.cssangehalten und das styles.cssLaden vollständig zugelassen habe. Dann lasse ich master.cssladen. Der "überlappende" Stil wurde master.cssweiterhin angewendet - und das Rendering wurde blockiert, bis es master.cssgeladen und analysiert wurde. Hinweis : Ich habe versucht , rel=preloadauf master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above styles.css`.
LeeC
Danke @LeeC, ich weiß, dass meine Antwort zum Zeitpunkt des Schreibens korrekt war, aber ich nehme Ihr Wort dafür, dass sie jetzt behoben wurde, und bearbeite meine Antwort.
n_i_c_k
1

Der beste Weg ist, Klassen so oft wie möglich zu verwenden. Vermeiden Sie sowieso ID-Selektoren (#). Wenn Sie Selektoren mit nur einzelnen Klassen schreiben, ist die CSS-Vererbung viel einfacher zu befolgen.

Update: Weitere Informationen zur CSS-Spezifität finden Sie in diesem Artikel: https://css-tricks.com/specifics-on-css-specificity/

Jeroen Ooms
quelle
1
Dies ist ein großartiger Artikel über CSS-Spezifität: css-tricks.com/specifics-on-css-specificity
Jeroen Ooms
0

Ich vermute aus Ihrer Frage, dass Sie eine doppelte Auswahl haben, einen Master-Satz, der für alle Seiten gilt, und einen spezifischeren Satz, den Sie die Master-Werte für jede einzelne Seite überschreiben möchten. Wenn dies der Fall ist, ist Ihre Bestellung korrekt. Der Master wird zuerst geladen und die Regeln in der nachfolgenden Datei haben Vorrang (wenn sie identisch sind oder das gleiche Gewicht haben). Es gibt eine sehr empfohlene Beschreibung aller Regeln auf dieser Website http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ Als ich mit der Front-End-Entwicklung begann, wurden auf dieser Seite so viele Fragen geklärt.

user3094826
quelle
0

Es ist die Kaskade , die den Vorrang von Deklarationen definiert. Ich kann die offizielle Spezifikation empfehlen; Dieser Teil ist gut lesbar.

https://www.w3.org/TR/css-cascade-3/#cascading

Das Folgende wirkt sich auf die Sortierung in absteigender Reihenfolge der Priorität aus.

  1. Eine Kombination aus Herkunft und Bedeutung:

    1. Transition Erklärungen
    2. Mit ... gekennzeichnete Erklärungen des Benutzeragenten !important
    3. Benutzererklärungen gekennzeichnet mit !important
    4. Erklärungen des Seitenautors markiert mit !important
      1. Definitionen für das Element mit styleAttribut
      2. Dokumentweite Definitionen
    5. Animation Erklärungen
    6. Erklärungen des Seitenautors
      1. Definitionen für das Element mit styleAttribut
      2. Dokumentweite Definitionen
    7. Benutzererklärungen
    8. Erklärungen des Benutzeragenten

  2. Wenn zwei Deklarationen denselben Ursprung und dieselbe Bedeutung haben, kommt die Spezifität ins Spiel, dh wie klar das Element definiert ist, und berechnet eine Bewertung.

    • 100 Punkte für jeden Bezeichner (#x34y )
    • 10 Punkte für jede Klasse ( .level)
    • 1 Punkt für jeden Elementtyp ( li)
    • 1 Punkt für jedes Pseudoelement ( :hover) ausgenommen:not

    Zum Beispiel hat der Selektor main li + .red.red:not(:active) p > *eine Spezifität von 24.

  3. Die Reihenfolge des Auftretens spielt nur dann eine Rolle, wenn zwei Definitionen denselben Ursprung, dieselbe Bedeutung und dieselbe Spezifität haben. Spätere Definitionen gehen früheren Definitionen im Dokument voraus (einschließlich Importen).

Michael Schmid
quelle
0

Ich glaube, wenn der Code ausgeführt wird, wird er von oben nach unten gelesen, was bedeutet, dass der letzte CSS-Link ähnliche Stile in allen darüber liegenden Stylesheets überschreibt.

Zum Beispiel, wenn Sie zwei Stylesheets erstellt haben 

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

In beiden Fällen setzen Sie die Hintergrundfarbe des Körpers auf zwei verschiedene Farben - die Farbe des Körpers in style2.css hat Vorrang.

Sie können das Problem der Stilpriorität vermeiden, indem Sie !IMPORTANTden Klassenstil verwenden, für den Sie Priorität haben möchten, oder möglicherweise Ihre <link>Bestellung neu anordnen .

Ennam Hoque
quelle