Html 更改活动导航链接的颜色 .导航-d.导航项目：悬停{ 边框底部：3倍实心#262262； } .家庭活动{ 边框底部：3倍实心#262262； } .导航链路{ 字体系列：“Lato”，无衬线； 颜色：#666666； 字母间距：0px； 字号：18px； 字号：900； }

因此，当我在主页上添加活动边框底部时，它可以工作（因此，当在页面上活动时，它将显示borderbottom），但例如文本主页不会改变颜色，它仍然是灰色而不是深紫色。当文本在页面上处于活动状态时，如何将其颜色从灰色更改为深紫色。

此

.Home-active

类似乎没有设置任何

颜色
.Home-active a.nav-link{color:red}
？
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active Home-active">
            <a class="nav-link" href="index.html"> Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="product.html">Product</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="occasions.html"> Occasions</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="bicyclerepair.html">Bicycle repair</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="product-single.html">Single product</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="contact.html">Contact</a>
          </li>

    .nav-d .nav-item:hover {
  border-bottom: 3px solid #262262 ;
}

.Home-active{
  border-bottom: 3px solid #262262 ;
 
}

      .nav-link{
    font-family: 'Lato', sans-serif;
    color: #666666;
    letter-spacing: 0px;
    font-size: 18px;
    font-weight: 900;
  }