0

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

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

4

2 回答 2

9

您需要在每个选择器前面加上 ID：

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

目前，您的选择器表示匹配“作为 ID 为“slideMenu”的元素的后代的链接、已访问的链接、悬停的链接和活动链接”。

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

于 2012-09-27T17:35:54.110 回答
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; 
}

瞧。希望能帮助到你。

于 2012-09-27T17:38:51.357 回答