爲什麼我的CSS錨式被覆蓋？

Question

我試圖重新主題ScrewTurn Wiki。有一個基本的結構，網頁被記錄在這裏：

ScrewTurn Wiki Theming Reference

有一些預定義類的不同類型的鏈接，例如：

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 { 
} 

我需要改變這些鏈接的顏色取決於它們所在的容器。原因是我的標題是深藍色，側欄是白色的。

我嘗試這樣做：

/* 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; 
} 

然而#SideBarDiv顏色覆蓋的#HeaderDiv鏈接。 SideBarDiv集裝箱不是HeaderDiv的子集。

在容器中的鏈接簡單的設置取決於他們做了什麼類，即：

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

缺少什麼我在這裏？請記住，在CSS方面，我是一名完整的新生。

Answer 1

需要判定所有a選擇各自的div ID選擇：

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

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

否則最後兩個第二規則集的部分最終在你的頁面重載樣式所有a.systemlink和a.externallink元素。