HTML Reihenfolge der Klassen im CSS wichtig?

[Belee]

Tach

Ich bin gerade auf ein Problem gestoßen welches ich mir nicht erklären kann, hab auch schon danach gesucht jedoch leider im Netz keine Antworten gefunden.

Das Problem ist folgendes...ein Beispiel..

Meine externe CSS..

@charset "utf-8";
...
......
....
.importantCol { border: 2px dotted #900; }
...
......
.input100 {  border: 1px solid #ddd; }
....
......

Nun das Problem ....

<input name="x" id="x" type="text" class="input100 importantCol" />

...und zwar, der rote gepunktete Rahmen um das <input> "importantCol wird nicht dargestellt, ABER, ändere ich die Rehenfolge in der CSS, also so...

@charset "utf-8";
...
......
....
.input100 {  border: 1px solid #ddd; }
......
.importantCol { border: 2px dotted #900; }
....
......

Dann wird der gepunktete Rahmen angezeigt. Kann mir bitte hier jemand erklären was das für ein Problem ist und seit wann spielt die Reihenfolge von Klassen in der CSS eine Rolle? wo kann man drüber lesen? habe dazu leider nichts finden können.

 

[fsx94]

Das letzte zählt bei verschiedenen Angaben über eine Struktur, deshalb macht man seitenspezifische CSS-Dateien nach der normalen CSS (wenn man mehrere CSS-Dateien benutzt)

siehe:

Sortierung nach der Reihenfolge des Vorkommens

Existieren zwei oder mehrere Selektoren mit identischer Gewichtung bezüglich nach unten Ursprung und Priorität sowie identischer nach unten Spezifität, entscheidet die Reihenfolge des Vorkommens - später notierte Selektoren überschreiben vorangegangene. Deklarationen aus Seite importierten Stylesheets werden hierbei als zuerst vorkommend betrachtet.
http://de.selfhtml.org/css/formate/kaskade.htm#reihenfolge

 

[Belee]

du meinst, klassen die als zweite zuweisung benutzt werden sollte man ans ende der css schreiben?
und über welche struktur reden wir hier?

 

[IceMatrix]

die reihenfolge spielt bei css eine wichtige rolle! du wählst für dein input-element die klassen input100 und importantCol, das bedeutet, dass beide css styles auf dieses element matchen. da es sich bei beiden selektoren nur um klassen handelt, haben sie die gleiche spezifizität. und wenn dies der fall ist spielt nurnoch die reihenfolge der css styles eine rolle!

für eine genaue erklärung verweise ich auf die entsprechende w3c recommendation: http://www.w3.org/TR/2002/WD-CSS21-20020802/cascade.html#cascade