✔ CSS wird nicht richtig interpretiert! (?) "Hilfe!"

[sorgenkind1]

Hallo,

ich habe folgendes Problem:
Ich habe einen Onlineshop aufgesetzt und ich möchte die Links im Text gerne anders färben, als den Rest der Links. Die Textlinks befinden sich im div.cat_text und werden als letztes definiert (Zeile 1033). Trotzdem behalten sie die Farbe der anderen Links, die in Zeile 120 definiert wurde. Im Firefox Developer AddOn wird die Definition der Links aus Zeile 120 auch nach der Definition der Links aus Zeile 1033 angezeigt.
Gibt es vielleicht irgendwelche CSS-Interpretationsregeln bezüglich der Reihenfolge, die mir nicht bekannt sind oder kann mir das jemand erklären?
Hier nochmal die Seite: http://www.asia-vita.de

Ich bin dankbar für jede Hilfe!

 

[SpiceLab]

Hier liegt ein Problem mit der Spezifität deiner genutzten Selektoren vor.

Zu Beginn definierst du global die Schriftfarbe für die Links mittels der Pseudoklassen link, :visited, usw.), dort wo sie von dieser Regel abweichen soll (.cat_text) jedoch nicht.

Ändere somit den Selektor (Zeile 1033) folgendermaßen um:

.cat_text a:link, .cat_text a:visited {
color:#62901C;
}

 

[sorgenkind1]

Danke für die Antwort, aber es hat leider nichts bewirkt.

 

[sorgenkind1]

Habe es jetzt so geschrieben:

div#center .cat_text a, div#center .cat_text a:hover, div#center .cat_text a:link, div#center .cat_text a:visited {color:#62901c;}

Das funktioniert. Warum es ohne div#center nicht funktioniert weiß ich nicht. Jemand eine Idee? (div#center a wird vor .cat_text a definiert)

 

[SpiceLab]

Eben besagte Spezifität - Gewichtung der Selektoren, denn wie mir eben beim weiteren Überflug deiner Stylesheets auffällt, hast du ja im weiteren Verlauf von "basic.css" eine weitere Regelmenge mit dem Selektor div#center a {} aufgestellt.

Durch den vorne angestellten ID-Bezeichner des Eltern- bzw. Großelternelements, ist diese Gewichtung selbstverständlich höher, als mein Vorschlag mit dem Klassen-Bezeichner .cat_text für das betroffene Nachfahrenelement von div#center, und erklärt auch, warum mein grundsätzlich richtiger Lösungsansatz bei dir nicht funktioniert - mangelnde Spezifität, eben ;-)

Es spielt bei dir zwar keine große Rolle, weil dort die :hover-Farbe der Links nicht gewechselt wird, aber grundsätzlich stimmt deine Selektor-Reihenfolge für die Pseudoklassen hover, :link, :visited) so nicht, und führt in den meisten Browsern zu Fehlinterpretationen, wenn dort eben doch ein Farbunterschied gelten soll, und deine Reihenfolge für die drei Regelmengen so beibehalten wird.

/* aus */
a:hover {...}
a:link {...}
a:visited {...}

/* wird */
a:link {...}
a:visited {...}
a:hover {...}

/* bzw. */
a:link, a:visited {...}
a:hover {...}

Siehe das Kapitel :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise und andere Elemente).

 

[sorgenkind1]

Ok, vielen Dank nochmal!