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“元素后代的链接，已访问的链接，正在悬停的链接以及活动链接”。

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

Answer 2

嗯，你实际上正在重新定义同样的规则。您必须在每次#sideMenu或#pageContent时写下来。这是：

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

瞧。希望它有所帮助。

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

2 个答案: