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

私は変更する必要がありますそれらのリンクの色は、それらが存在するコンテナに依存します。その理由は、私のヘッダーが濃い青色で、サイドバーが白いからです。

は、私はこれを試してみました： #SideBarDiv色が #HeaderDivリンクを上書きしますが

/* 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の子ではありません。コンテナ内のリンクは、単に、彼らが何をすべきかに応じてクラスを設定

、すなわち：

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

私はここで何をしないのですか？ CSSについては、私は完全な新入生です。

Answer 1

あなたは、それぞれのdiv IDセレクタを持つすべてのあなたのaのセレクタ修飾する必要があります。それ以外の場合は第二のルールセットの最後の2つの部分はのスタイルをあなたのページにあるすべてのa.systemlinkとa.externallink要素を上書きしてしまう

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

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

を。