CSS Priorität der Zuordnungen

[=DarkEagle=]

Hallo,
ich fange gerade damit an, CSS zu lernen, um slebst manuell Wordpress-Themes vom Design her modifizieren zu können. Momentan versuche ich in komplizierteren Zusammenhängen die richtige Zuordnung zu finden. Im Prinzip, die Priorität der Zuordnung. Also, was ist wenn für ein Element mehrfach eine Eigenschaft definiert wurde. Eine Übersicht habe ich hier gefunden http://de.selfhtml.org/css/formate/kaskade.htm#ursprung

Danach hat das style-Attribut die oberste Priorität, dann kommt die ID, dann die Klasse und dann alles andere.
Testweise habe ich folgende CSS:

span {color:blue}
#farbe1 {color:yellow}
.farbe2 {color:black}

Als HTML hat mir ein Freund dazu folgendes gebastelt:

<span style=“black“ class=“farbe2“ >Text1</span>
<span id=”farbe1” class=”farbe2” >Text2</span>
<span class=”farbe1” >Text3</span>
<span color=”black” id=”farbe1” >Text4</span>
<span style=”color:black” id=”farbe1” class=”farbe2” >Text5</span>

<link rel="Stylesheet" type="text/css" href="test.css" />

Das ganze ist extra etwas verwirrender von den Formulierungen der Farben her gewählt, damit man auch wirklich die Prioritäten ausknobeln muss.

Mein Problem ist nun, dass jeder Text in der Farbe des definierten span angezeigt wird. Grün ist momentan definiert und wird daher alles in grün anzeigen. Entferne ich Green dann als Eigenschaft aus der CSS, ist alles schwarz...
Meiner Meinung nach müsste die Farbzuordnung wie folgt sein:

Text1 rot, da style="black" keine gültige Formatierung ist und daher class green verwnedte wird. In der CSS ist dafür red eingespeichert.
Text2 blau, da die ID red wichtiger ist als die class green und in CSS 'red als blue hinterlegt ist.
Text3 grün, da es keine class red gibt und entsprechend der span als Eigenschaftsfarbe gilt.
Text4 blau, da color="black" keine gültige Formatierung hat und id="red" daher zum Tragen kommt und in CSS als blau hinterlegt ist.
Text5 sollte schwarz sein, da style vor allem Vorrang hat und entsprechend richtig formatiert ist.

Aber entweder hat es die Farbe, die für span in der CSS definiert wurde, oder, wenn die Farbe weg ist, ist alles einfach nur schwarz. Hier kann mir doch bestimmt jmd. meinen Fehler aufzeigen :-)
Getestet habe ich den Spaß mit Chrome und Firefox und als HTML-Editor einfach den Windows Editor verwendet.

 

[Seby007]

Hi,

deine Anführungszeichen im Beispiel sind falsch. Es müssen die bei der [Shift]+2 genommen werden oder alternativ das einfache Hochkomma ([Shift]+Raute).

Als Editor ziehst du dir gaaaanz schnell das kostenlose notepad++ runter... da sieht man z.B. direkt die falschen Anführungszeichen. Und vor allem farblich schön hervorgehoben.

Deine Erklärungen sind richtig.

EDIT:

Hier nochmal für deine Unterlagen die Prioritätsliste (je tiefer, desto wichtiger)

1. Browser-eigenes Stylesheet
2. Stylesheet des Benutzers
3. universeller * Selektor
4. Elemente und Pseudoelemente (z.B. first-letter)
5. Klassen, Pseudo-Klassen und Attribute (z.B. [selected="selected])
6. ids
7. style-Einsatz im HTML-Tag

 

[=DarkEagle=]

Verdammt. Das darf nicht wahr sein...ist korrigiert und jetzt funktioniert es auch...Danke! Doofer Fehler -.-

 

[Seby007]

Es gibt keine doofen Fehler xD
Mein Liebling sind vergessene Semikolons in PHP-Anweisungen

Viel Erfolg beim Tüfteln

 

[=DarkEagle=]

Semikolons vergisst man meistens. Egal, in welcher Sprache^^
Wobei: es gibt auch Smalltalk als Programmiersprache. Da sind es Punkte.

Danke danke. Jetzt kann ich auch wirklich weiter tüfteln ;-)

 

[Daaron]

Spaßig wird das Ganz erst, wenn du mehrere Selektoren kombinierst, und dann versuchst herauszufinden, welcher die höhere Gewichtung hat.

Angenommen, die folgenden 2 Selektoren betreffen dasselbe Element, wird es rot oder blau?
.class #id2 {color:blue;}
#id1 .class {color:red;}

Das sind dann so die Momente, wo man einfach nur noch ausprobiert.

 

[Seby007]

Die 2 Selektoren können gar nicht dasselbe Element treffen, da eine id pro Element maximal einmal vergeben wird.

Selbst wenn 2mal die gleiche Anweisung gibt, wird immer die letzte Anweisung favorisiert.

 

[Daaron]

Es ist nicht dieselbe ID, es ist einmal ID1 udn einmal ID2. Und ja, wenn beide dieselbe Gewichtung haben, dann gewinnt die letzte. Tatsächlich hat die Reihenfolge der Selektoren wohl keinen Einfluss auf die Specificity, aber man weiß es am Ende nie, bis man es probiert.

 

[Seby007]

Man weiß es eben doch. Irgendwie redfen wir andeinander vorbei...?!
Wobei ich auch oft Try&Error versuche, da es oft schneller geht als langes Nachdenken