链接中的文本颜色(由ID选择)将覆盖不同ID的父链接颜色

Question

有点难以解释,所以这里有一些代码.

所以我有这个CSS,它使所有链接都呈橙色.它包含整个页面.

#pageContent a:link,a:visited, a:hover, a:active {
    color: #EE4036; 
}

然后我在pageContent id中的某个地方有一个id sideMenu的元素,

#sideMenu a:link, a:visited, a:hover, a:active{
    color:#58595B;

}

问题在于,由于某种原因,sideMenu的给定链接颜色会覆盖pageContent的链接颜色,这些链接不是sideMenu的子代.

例如,如果我有

<div id="pageContent" >
   <a>this text should be #EE4036</a>
   <div id="sideMenu">
      <a>this text should be #58595B</a>
   </div>
</div>

sideMenu的<a>文本内容将按预期设置为#58595B颜色,但pageContent也是如此,这是我不希望的.

我对CSS有点新意,所以我觉得我错过了一些非常明显的规则,谷歌根本没有帮助.那么,有谁知道发生了什么？

Answer 1

您需要为每个选择器添加前缀ID:

#sideMenu a:link, #sideMenu a:visited, #sideMenu a:hover, #sideMenu a:active {
    color:#58595B;
}

目前,您的选择器表示匹配"具有ID"slideMenu"元素后代的链接,已访问的链接,正在悬停的链接以及活动链接".

基本上,当您使用逗号创建一组选择器时,每个选择器都是完全独立的.他们之间没有任何关系.