Warum wird mein CSS-Ankerstil außer Kraft gesetzt?

Question

Ich versuche ScrewTurn Wiki zu re-theme. Es gibt eine Grundstruktur auf der Seite, die hier dokumentiert ist:

ScrewTurn Wiki Theming Reference

Es gibt einige vordefinierte Klassen für verschiedene Arten von Links, zum Beispiel:

a, a:link, a:active { 
    color: #ffffff; 
    text-decoration: none; 
} 
a:hover { 
    color: #D9671E; 
    text-decoration: underline; 
} 

a.externallink { 
    background-image: url(Images/ExternalLink.gif); 
    background-position: right; 
    background-repeat: no-repeat; 
    padding-right: 14px; 
} 
a.internallink { 
} 

/* Link to a .aspx page */ 
a.systemlink { 
} 

/* Link to a Wiki page */ 
a.pagelink { 
} 

Ich brauche das ändern Die Farbe dieser Links hängt davon ab, in welchem ​​Container sie sich befinden. Der Grund dafür ist, dass meine Kopfzeile dunkelblau ist und meine Seitenleiste weiß ist.

Ich versuchte dies:

/* Make header links white because of dark background */ 
#HeaderDiv a.pagelink, a.systemlink, a.externallink { 
    color: white; 
} 

#SidebarDiv a.pagelink, a.systemlink, a.externallink { 
    color: darkblue; 
} 

jedoch die #SideBarDiv Farbe, die die #HeaderDiv Links außer Kraft setzt. Der SideBarDiv Container ist kein Kind von HeaderDiv.

Die Links in den Behälter einfach die Klasse festgelegt, je nachdem, was sie tun, d.h .:

<a href=".." class="systemlink">Logon</a> 
<a href=".." class="pagelink">Some wiki article</a> 

Was ich hier fehlt? Denken Sie daran, ich bin ein kompletter Neuling, wenn es um CSS geht.

Answer 1

Sie müssen alle Ihre a Wähler mit ihren jeweiligen div ID-Selektoren qualifizieren:

#HeaderDiv a.pagelink, #HeaderDiv a.systemlink, #HeaderDiv a.externallink { 
    color: white; 
} 

#SidebarDiv a.pagelink, #SidebarDiv a.systemlink, #SidebarDiv a.externallink { 
    color: darkblue; 
} 

Ansonsten sind die letzten beiden Teile der zweiten ruleset Stile für allea.systemlink und a.externallink Elemente in Ihren Seiten am Ende überschreiben .