:visited zweimal benutzt

[Jörg Wirtgen]

Hi!

Ich will a:visited zuerst global für einen Bereich anders setzen, und danach für einen speziellen Bereich noch anders. Doch seltsamerweise wird bei der zweiten Umdefinierung zwar die Background-Farbe geändert, nicht aber die Schriftfarbe. Wisst ihr Rat?

Die CSS-Stelle sieht etwa so aus:

/* global */
#col2 a:link {color:black; text-decoration:none;}
#col2 a:visited {color:#888; text-decoration:none;}
#col2 a:hover {color:#00f; text-decoration:underline;}
...
.blogtext a:visited {color:black; background:red;}

und im HTML:
<div class="#col2">
... (hier Links mit visited=grau, wie gewünscht)
<div class="blogtext">
... (hier sind die visited-Links immer noch grau, aber mit rotem Hintergrund?!)
</div></div>

Lustigerweise tritt das bei Opera, IE und Firefox auf, sodass es wohl daran liegt, dass ich beim CSS was nicht richtig verstanden habe :-) Warum übernimmt er die Hintergrundfarbe, aber nicht die Schriftfarbe?

Was ich bisher ausprobiert habe, ohne dass es hilft:

• :link, :hover unten neu definieren
• :active, :focus auch definieren
• die zweite Definition weiter oben vor der :hover-Definition notieren

[Jörg Wirtgen]

#col2 a:link {color:black; text-decoration:none;}
#col2 a:visited {color:#888; text-decoration:none;}
#col2 a:hover {color:#00f; text-decoration:underline;}
...
.blogtext a:visited {color:black; background:red;}

Ha! Jetzt hab ich noch eine Sache ausprobiert, und damit funktionierts:

#col2 .blogtext a:visited ...

Aber kann mir jemand erklären, warum Vordergrund- und Hintergrundfarbe sich bei diesen Vererbungs-Geschichten unterschiedlich benehmen?

Bis dann . . . Jockel

[Cheatah]

Hi,

Ha! Jetzt hab ich noch eine Sache ausprobiert, und damit funktionierts:

sieh mal einer an :-)

#col2 .blogtext a:visited ...

Prima, Du hast die Lösung aus der Antwort auf meine vorherige Frage gefunden.

Aber kann mir jemand erklären, warum Vordergrund- und Hintergrundfarbe sich bei diesen Vererbungs-Geschichten unterschiedlich benehmen?

Da wird nichts vererbt, sondern kaskadiert. Die Hintergrundfarbe konkurriert mit keinem anderen Wert, die Textfarbe schon. Ergo gilt die erstgenannte, während die letztgenannte das Spezifitäts-Gefecht auskämpfen muss.

Cheatah

[Jörg Wirtgen]

Da wird nichts vererbt, sondern kaskadiert. Die Hintergrundfarbe konkurriert mit keinem anderen Wert, die Textfarbe schon. Ergo gilt die erstgenannte, während die letztgenannte das Spezifitäts-Gefecht auskämpfen muss.

Ahsoo!!! Das heißt, wenn ich bei der col2-Definition auch die Hintergrundfarbe geändert hätte, würde die bei der Re-Definition auch nicht funktioniert haben...

Hmm stimmt, ich habe mal text-decoration ebenfalls geändert, und da hatte ich den gleichen Effekt wie bei der Schriftfarbe, weil ich das auch in der col2-Definition geändert hatte (was ich oben nicht aufgeschrieben hatte)...  Jetzt ergibt das einen Sinn!

Danke!!

[Cheatah]

Hi,

Ich will a:visited zuerst global für einen Bereich anders setzen, und danach für einen speziellen Bereich noch anders. Doch seltsamerweise wird bei der zweiten Umdefinierung zwar die Background-Farbe geändert, nicht aber die Schriftfarbe. Wisst ihr Rat?

Spezifität! Ein ID-Selektor schlägt jede beliebige Menge an Klassenselektoren.

.blogtext a:visited {color:black; background:red;}

Gibt es außerhalb von #col2 noch weitere Elemente mit .blogtext, auf die diese Formatierung zutreffen soll?

Cheatah

[Der Martin]

Hallo,

auch wenn sich das eigentliche Problem vielleicht schon erledigt hat ...

#col2 a:link {color:black; text-decoration:none;}
#col2 a:visited {color:#888; text-decoration:none;}
#col2 a:hover {color:#00f; text-decoration:underline;}

Hier nimmst du also Bezug auf a-Elemente, die in einem beliebigen anderen Element mit der ID col2 stehen.

<div class="#col2">

Und was ist das dann? Selbst wenn "#col2" ein gültiger Klassenname wäre, so gäbe es schon aus syntaktischen Gründen keinen Selektor, der dafür zutrifft, weil die Raute '#' im Selektor immer auf eine ID Bezug nimmt.

Oder war das hier nur ein Tippfehler?

So long,
 Martin

[Jörg Wirtgen]

<div class="#col2">
Oder war das hier nur ein Tippfehler?

Jupp, hab aussem Kopp getippt statt ausser Datei zu kopieren. Dort steht natürlich <div id="col2">...

Bis dann . . . Jockel