当前页面的一种样式链接与其他样式有何不同？我想交换文本和背景的颜色。
HTML：
<ul id="navigation">
<li class="a"><a href="/">Home</a></li>
<li class="b"><a href="theatre.php">Theatre</a></li>
<li class="c"><a href="programming.php">Programming</a></li>
</ul>
CSS：
li a{
color:#A60500;
}
li a:hover{
color:#640200;
background-color:#000000;
}
使用 jQuery，您可以使用该.each函数通过以下代码遍历链接：
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});
根据您的页面结构和使用的链接，您可能需要缩小链接的选择范围，例如：
$("nav [href]").each ...
如果您使用 URL 参数，则可能需要去除这些参数：
if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...
这样您就不必编辑每个页面。
a:active：当您点击链接并按住它时（激活！）。
a:visited: 当链接已被访问时。
如果希望当前页面对应的链接高亮显示，可以为链接定义一些特定的样式——
.currentLink {
color: #640200;
background-color: #000000;
}
仅将这个新类添加到相应的li（链接），无论是在服务器端还是在客户端（使用 JavaScript）。
无需单独修改每个页面（将“当前”类添加到特定链接）就可以实现这一点，但仍然没有 JS 或服务器端脚本。这使用了:target伪选择器，它依赖于#someid出现在地址栏中。
<!DOCTYPE>
<html>
<head>
<title>Some Title</title>
<style>
:target {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a id="news" href="news.html#news">News</a></li>
<li><a id="games" href="games.html#games">Games</a></li>
<li><a id="science" href="science.html#science">Science</a></li>
</ul>
<h1>Stuff about science</h1>
<p>lorem ipsum blah blah</p>
</body>
</html>
有几个限制：
只要指向这些页面的任何链接都包含 id，并且导航栏位于顶部，就不会有问题。
其他页内链接（书签）也会导致颜色丢失。
获取文档中的所有链接并将它们的参考 URL 与文档的 URL 进行比较。如果匹配，则向该链接添加一个类。
JavaScript
<script>
currentLinks = document.querySelectorAll('a[href="'+document.URL+'"]')
currentLinks.forEach(function(link) {
link.className += ' current-link')
});
</script>
One Liner Version of Above
document.querySelectorAll('a[href="'+document.URL+'"]').forEach(function(elem){elem.className += ' current-link')});
CSS
.current-link {
color:#baada7;
}
其他注意事项
上面 Taraman 的 jQuery 答案只搜索[href]哪些将返回link标签，而不是a依赖于href属性的标签。搜索a[href='*https://urlofcurrentpage.com*']仅捕获那些符合条件的链接，因此运行速度更快。
此外，如果您不需要依赖 jQuery 库，那么 vanilla JavaScript 解决方案绝对是您要走的路。
a:link -> 它定义了未访问链接的样式。
a:hover -> 它定义了悬停链接的样式。
当鼠标移到链接上时，它会悬停在链接上。