如何修改激活状态下<a>标签的文字颜色为指定色值#00b39b

你使用的a:active伪类仅代表鼠标点击按住未释放的瞬时状态，无法匹配「当前页面对应导航链接」的永久激活状态，这是配置不生效的核心原因。

方案1：多页面静态站点（纯CSS实现） #

你可以给当前页面对应的导航<a>标签手动加一个active类，单独写该类的样式即可：

a {
  text-decoration: none;
  color: gray;
}
/* 仅激活态的链接样式 */
a.active {
  color: #00b39b;
  /* text-decoration为复合属性，需要先指定样式再写颜色才会生效 */
  text-decoration: underline #00b39b;
}

HTML示例（以当前在About us页面为例）：

<ul class="header-ul">
    <li>
        <!-- 当前页面的链接添加active类 -->
        <a href="#" class="active">About us</a>
    </li>
    <li>
        <a href="#">Career</a>
    </li>
    <li>
        <a href="#">Departments</a>
    </li>
</ul>

方案2：动态站点/单页应用（JS自动实现） #

如果是动态站点或者单页应用，可以通过JS判断当前页面URL和导航链接的href是否匹配，自动给对应链接添加active类：

// 获取所有导航链接
const navLinks = document.querySelectorAll('.header-ul li a');
// 遍历匹配
navLinks.forEach(link => {
  if (link.href === window.location.href) {
    link.classList.add('active');
  }
})

注意事项 #

• 你原有CSS中把a:visited（访问过的链接）也设置为#00b39b，会导致所有用户访问过的链接都变色，建议删除该选择器避免样式冲突
• 如果不需要伪元素::before/::after的特殊样式，可以删除对应配置避免干扰普通链接的样式表现

内容的提问来源于stack exchange，提问作者Amr Azab