在网站开发中，经常需要通过CSS来修改链接的样式。其中一个很有用的技巧是改变当前页面链接的颜色。
HTML Markup
首先，在HTML中添加class="active"到当前页面链接的标签上，例如：
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" class="active">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>CSS
然后，我们可以使用以下CSS样式来改变链接的颜色：
a.active {
color: red;
}这个CSS选择器将仅仅影响带有class="active"的链接，并将它们的颜色设置为红色。
原理解析
这个技巧的原理是基于CSS的层叠特性。当浏览器遇到多个CSS规则时，会按照特定的优先级和层叠顺序来决定哪条规则应用于元素。由于.active的选择器比普通的链接选择器（如a）更具体，因此它将具有更高的优先级，并覆盖普通链接的默认样式。
总结
使用这个技巧让用户能够更容易地知道他们当前所在的页面，提升了网站的用户体验。除此之外，这个技巧还可以通过JavaScript自动设置当前页面的链接，提升网站的可访问性。
需要注意的是，这个技巧只适用于基于HTML链接元素的网站。对于使用JavaScript来创建导航菜单的网站，需要使用其他方法来确定当前活动的链接。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26060