2010-03-10 5 views
23

definieren Wenn ich zwei CSS-Dateien habe:Zwei CSS-Dateien gleiche Klasse

Datei 1:

.colorme 
{ 
    background-color:Red; 
} 

File 2:

.colorme 
{ 
    background-color:Green; 
} 

und sie in einer externen Seite, die man wird Priorität haben? Ich rate den, der zuletzt geladen ist? Wenn ja, wie kann ich sicherstellen, welche CSS-Datei zuletzt geladen wurde?

+1

Es könnte helfen, wenn Sie nicht als „Definition einer Klasse“ dieser dachte. Sie schreiben Regelsätze mit Selektoren, die Elementen entsprechen. (Diese bestimmten Selektoren entsprechen Elementen basierend auf ihrer Klasse). Dann gilt die Kaskade: http://www.w3.org/TR/CSS21/cascade.html#cascade – Quentin

+1

Wenn Sie nicht die Kontrolle über die Reihenfolge der Dateien im HTML haben, können Sie immer sicherstellen, dass eine Regel gewinnt mit der! wichtigen Flagge. – Tom

Antwort

48

Der zuletzt geladene (oder wie David angibt, genauer enthalten letzten) gewinnt in diesem Fall. Beachten Sie, dass es pro Eigenschaft ist, wenn Sie 2 Definitionen mit verschiedenen Eigenschaften laden, wird das Ergebnis die Kombination sein. Wenn eine Eigenschaft sowohl im ersten als auch im zweiten Fall vorhanden ist, wird der letzte Gewinn für diese Eigenschaft erzielt.

Die einzige Möglichkeit, um sicherzustellen, welche zuletzt verwendet/gewinnt ist einschließlich der <link> Elemente in der Reihenfolge, die Sie auf der Seite wünschen.

Für die Eigenschaft, hier ist ein Beispiel:

.class1 { color: red; border: solid 1px blue; padding: 4px; } //First .css 
.class1 { color: blue; margin: 2px; } //Second .css 

entspricht:

.class1 { color: blue; border: solid 1px blue; padding: 4px; margin: 2px; } 
+14

Um pedantisch zu sein: Es ist nicht wirklich der * zuletzt geladene *, es ist der, der zuletzt in der Quellreihenfolge erscheint. Bei asynchronem Laden könnte am Ende der "Kopf" -Last ein kurzes Stylesheet vor einem langen am Anfang stehen. – Quentin

+0

@David - Guter Punkt, der es viel klarer macht, aktualisiert –

+0

Froh dazu beitragen. – Quentin

Verwandte Themen