css - 由ID选择的链接中的文本颜色将覆盖其他ID的父链接颜色

有点难以解释，所以这里是一些代码。

所以我有这个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的给定链接颜色会覆盖非sideMenu子级链接的pageContent的链接颜色。

例如，如果我有

<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有点陌生，所以我觉得我缺少一些非常明显的规则，而Google根本没有帮助。所以，有人知道发生了什么吗？

最佳答案

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

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

当前，您的选择器说匹配项“是ID为“ slideMenu”的元素的后代的链接，已访问的链接，正在悬停的链接和活动链接”。

基本上，当您使用逗号创建group of selectors时，每个选择器都是完全独立的。它们之间没有关系。