0

我正在尝试以不同的颜色显示当前页面链接。我找到了其他可以做到这一点的答案，但它仍然无法正常工作。我在每个页面的相应链接上使用了一个 current_link 类。我还找到了一个答案，说将 !important 标记应用于颜色规则，但没有做任何事情。我在想我有一些小错误或者我不知道。也许某种排序规则。这是与我的链接相关的 CSS 规则。如您所见，我在顶部有 .current_link（我认为这将消除任何订购/过度骑行问题）。将遵循相关的 HTML 命名。

.current_link {
    color: #00AD26;
}

#main_nav a:link, a:visited {
    text-decoration:none;
    color: #00A3E6;
}
#main_nav a:hover {
    text-decoration: none;
    color: #A8EDFF;
}
#main_nav a:active {
    text-decoration: none;
    color: #00B7FF;
}


a:link, a:visited {
    text-decoration:none;
    color: #00A3E6;
}
a:hover, a:active {
    text-decoration: none;
    color: #00B7FF;
}

来自其中一页的相对 HTML。

<ul id="main_nav" class="grid_5 prefix_9">
    <li id="home" class="current_link"><a href="index.html">Portfolio</a></li>
    <li id="about"><a href="about.html">About</a></li>
    <li id="contact"><a href="contact.html">Contact</a></li>
</ul>
4

3 回答 3

1

你的.current_link匹配<li>。
内部覆盖它从其父元素继承的颜色<a>。<li>

您需要通过移动<a>类或更改选择器以选择.<a><li>

此外，较低的规则会覆盖较早的规则（如果它们具有相同的特异性）。

于 2013-05-17T16:49:40.313 回答
1

试试这个：

.current_link a {
    color: #00AD26 !important;
}
于 2013-05-17T16:51:39.890 回答
0

你应该使用：

#main_nav li.current_link a {
    color: #00AD26;
}

这将否决其他选择器并避免使用!important.

于 2013-05-17T16:57:25.620 回答