如何使用CSS显示当前页面。当前链接不工作

我正在尝试以不同的颜色显示当前页面链接。我已经找到了其他解决办法，但它仍然不起作用。我在每个页面的相应链接上使用一类当前链接。我还找到了一个答案，上面写着应用！颜色规则的重要标记，但这没有任何作用。我在想我有点小毛病或者我没有意识到。也许是某种排序规则。 以下是与我的链接相关的CSS规则。正如您所见，我在顶部有.current_链接（我认为这将消除任何订购/过度使用的问题）。随后将显示相对的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>

您的

。当前链接与
匹配

中的
覆盖它从其父元素继承的颜色

您需要通过移动类或更改选择器以选择
中的
元素，将颜色应用于
本身

此外，较低的规则会覆盖较早的规则（如果它们具有相同的特殊性）。
尝试以下方法：

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

你应使用：

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

这将否决其他选择器并避免使用
！重要信息
请确保当前链接a选择器比更通用的链接颜色样式具有更高的特异性。谢谢您的回答。我在想这是另一种方式。较高的规则会覆盖较低的规则。使用！通过更具体地使用选择器，可以避免出现重要问题。非常感谢！谢谢你所有的回答和你的快速。在这之前我已经尝试了我所发现的一切。包括更加具体，以及应用'！对规则很重要。造成不同的是，我在li和“.current_link”之间留出了一个空间，为什么他们需要在一起？它们不是两个不同的选择器，所以应该分开吗？同时，它的特殊性是否会凌驾于其他选择器之上？再次谢谢你，没问题。之所以是
li.current\u link
，是因为您希望使用类
current\u link
将
li
元素作为目标。如果将它们分开，那么实际上是将类
current\u链接
放在
li
中的元素作为目标。为了真正理解哪些选择器否决了其他选择器，我推荐这篇文章：-这篇文章非常详细，解释得比我所能解释的要清楚得多。希望有帮助！