如何使用CSS显示当前页面？.current_link不工作
如何使用CSS显示当前页面？.current_link不工作
提问于 2013-05-18 00:48:05
我正在尝试用不同的颜色显示当前页面链接。我已经找到了其他可以做到这一点的答案，但它仍然不起作用。我在每个页面的相应链接上使用了一个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>Stack Overflow用户
发布于 2013-05-18 00:49:40
您的.current_link与<li>匹配。
<li>中的<a>将覆盖它从其父元素继承的颜色。
您需要将颜色应用于<a>本身，方法是移动类或更改选择器以选择<li>中的<a>元素。
此外，较低的规则会覆盖较早的规则(如果它们具有相同的特异性)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16614195
复制相关文章
相似问题
腾讯云开发者
