HTML导航栏选中项字体颜色设置失效，求解决方法

我希望点击导航栏中的“Home”“Experience”“Career Option”“Feedback”选项时，将其字体颜色设置为CSS变量--color-brand，但尝试以下代码均未达到预期效果，请求帮助。

我的HTML代码 #

<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    <div class="container flex-lg-column">
        <a class="navbar-brand mx-lg-auto mb-lg-4" href="#home">
            <span class="h3 fw-bold d-block d-lg-none">My Career Prospect</span>
            <img src="../photos/intro.jpg" class="d-none d-lg-block rounded-circle" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto flex-lg-column text-lg-center">
                <li class="nav-item">
                    <a class="nav-link" href="../index/index.HTML">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../Experience/Experience.html">Experience</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../career/Career.html">Career Option</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../Feedback/Feedback.html">Feedback</a>
                </li>
                <li class="nav-item">
                    <img src="../photos/moon.png" id="icon">
                </li>
            </ul>
        </div>
    </div>
</nav>

尝试过的CSS代码 #

代码1 #

.navbar .navbar-nav .nav-link:focus {
    color: var(--color-brand);
}

代码2 #

.navbar .navbar-nav .nav-link:active {
    color: var(--color-brand);
}

问题原因与解决方法 #

你的代码没生效主要是两个可能的原因：要么是Bootstrap默认样式的优先级比你的选择器高，要么是混淆了「点击瞬间的状态」和「页面跳转后的当前状态」。

1. 实现点击瞬间（按下鼠标时）变色 #

:active伪类对应鼠标按下链接的瞬间状态，但Bootstrap的默认样式可能覆盖了你的设置，需要提高选择器优先级：

/* 方法1：使用更具体的选择器 */
.navbar-dark .navbar-nav .nav-link:active {
    color: var(--color-brand);
}

/* 方法2：强制覆盖（仅在必要时使用） */
.navbar .navbar-nav .nav-link:active {
    color: var(--color-brand) !important;
}

2. 实现页面跳转后保持当前页面导航链接高亮 #

如果你想要的是跳转到对应页面后，该页面的导航链接保持--color-brand颜色，需要结合Bootstrap的active类：

• 首先在对应页面的导航链接上添加active类，比如Home页面的Home链接：

  <li class="nav-item">
      <a class="nav-link active" href="../index/index.HTML">Home</a>
  </li>
  

• 然后设置active类的样式：

  .navbar-dark .navbar-nav .nav-link.active {
      color: var(--color-brand);
  }
  

  如果还是被默认样式覆盖，同样可以添加!important来强制生效。

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