Question

我正在尝试以不同的颜色显示当前页面链接。我发现其他答案会做到这一点，但它仍然没有用。我在每个页面的相应链接上使用了一类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>

Answer 1

您的.current_link与<li>匹配 <a>内的<li>会覆盖从其父元素继承的颜色。

您需要将颜色应用于<a>本身，方法是移动课程或更改选择器以选择<a>内的<li>元素。

此外， lower 规则会覆盖之前的规则（如果它们具有相同的特异性）。

Answer 2

试试这个：

.current_link a {
    color: #00AD26 !important;
}

Answer 3

您应该使用：

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

这将取代其他选择器并避免使用!important。

如何使用CSS显示当前页面？ .current_link无效

3 个答案: