Überlagert eingebettete CSS immer externe CSS?

Ich hatte früher studiert, dass eingebettete CSS immer externe CSS übersteuert. Aber ich fand, dass, was immer im Code zuletzt kommt, diese Stile vorherrschen.Überlagert eingebettete CSS immer externe CSS?

Bitte lesen Sie den folgenden Code ein: (Anbetracht dessen, dass ich Farbe verwendet haben: grün; in externen CSS für h3)

<head> 
<link rel=stylesheet href="style.css"> 
<style> 
h3{ 
color:red; 
} 
</style> 
</head>

Ausgabe des obigen Codes zeigt mir jeden Text, den ich in der roten Farbe innen h3 schreiben .

Aber wenn ich den obigen Code wie folgt schreiben: -

<head> 
    <style> 
h3{ 
color:red; 
} 
</style> 
<link rel=stylesheet href="style.css"> 
</head>

Im obigen Fall, erhalte ich die Farbe des Textes innerhalb h3 als „grün“ (seit der Annahme I „grün“ als Schrift gegeben haben -Farbe in externen CSS.

Dies ist, weil ich "Link" Tag nach "Stil" Tag geschrieben habe.

Also was bedeutet, dass externe CSS wird nicht immer von eingebetteten CSS überfahren werden.

Oder ist es eine Regel, das "Link" -Tag immer vor dem "style" -Tag in "head" zu schreiben.

Bitte erläutern Sie diesen Punkt.

Quelle

2015-07-12 A_J

angewendet Wo und wie haben Sie gelernt, dass "eingebettete CSS immer externe CSS übersteuert"? –

Ich bin sicher, was er als "embedded" gelesen hat, bezog sich auf Inline-Styles über das universal style *** Attribut *** - und er verwechselte das mit dem Style *** -Tag ***. – connexo

@torazaburo, lese ich hier darüber: http://www.boogiejack.com/CSS_2.html –

Es spielt keine Rolle, ob Ihr Stylesheet innerhalb <style> - Tags oder extern und mit <link /> verbunden ist. Die letzte hat immer Vorrang, sie könnte sogar in der gleichen externen Datei sein, wirklich nur die Reihenfolge der Selektoren und ihre specificities Angelegenheit.

jedoch Inline CSS mit dem style=".." Attribut hat immer Vorrang, weil es die meisten spezifischen ist. Um dies zu überschreiben, müssten Sie !important verwenden. Eigenschaften in style=".." mit !important können nicht überschrieben werden.

Quelle

2015-07-12 16:27:06 kelunik

Inline-CSS bekommt nur Vorrang, weil es spezifischer ist, nicht wegen der Reihenfolge. In HTML5 können Sie in einigen Fällen "style" -Tags innerhalb des Bodys haben, aber wenn Sie diese nach dem Element platzieren, auf das es angewendet wird, hat es keinen Vorrang vor Inline-CSS. – Guffa

@kelunik,. "Es spielt keine Rolle, ob Ihr Stylesheet inline oder extern ist" -> anstelle von "inline" sollte es "eingebettet" sein. "Allerdings eingebettet CSS mit dem Stil =" .. "" Anstelle von "eingebettet" sollte es "Inline" –

Nach allen Regeln von CSS, wenn es 2 mit der gleichen Spezifität gibt, wird die letzte definiert übernehmen.

Zum Beispiel schreiben:

div { 
    background: green; 
} 


div { 
    background: red; 
}

Wird es unabhängig von der Quelle rot.

Quelle

2015-07-12 16:25:44 PiniH

"Vorrang" -> "Spezifität" – steveax

Danke, das Wort entging mir – PiniH

Welche CSS-Regeln angewendet werden, hängt von der Spezifität der CSS-Regel ab, in der diese Regel enthalten ist, und dem Vorhandensein von . Wenn zwei widersprüchliche Regeln platziert werden, überschreibt die später deklarierte Regel die vorherige Regel. Wenn zwei widersprüchliche Regeln mit Selektoren unterschiedlicher Spezifität deklariert werden, gewinnen die spezifischeren Stile unabhängig von der Platzierung. Wenn eine Regel als !important z.B.

die !important Regel wird immer gewinnen.

Als Referenz geht die Liste der Spezifität von CSS-Selektoren wie folgt aus (von den meisten spezifisch für mindestens):

Stilattribute
ID
Klasse, Pseudo-Klasse, Attribut
Elements

Quelle

2015-07-12 16:31:51 Tim

Sicher, aber diese Frage war weder Spezifität noch wichtig. –

Aber es ging um CSS-Hierarchie; Welche Regeln haben Vorrang vor den anderen? Ich habe nur versucht, meine Antwort zu erweitern, um eine vollständige Erklärung dessen zu geben, welche Faktoren berücksichtigt werden, wenn widersprüchliche CSS-Regeln erklärt werden. – Tim

Aber Sie haben nichts über eingebettete und externe css-Priorität gesagt, was die Hauptfrage war –

Es spielt keine Rolle, ob es eingebettet ist oder nicht. Stile werden gemäß Cascading order

Quelle

2015-07-12 16:40:19 Trix

Überlagert eingebettete CSS immer externe CSS?

Antwort

Verwandte Themen