html - 如何让导航栏更加突出？

Question

我的页面上有一个导航栏，但出于某种原因只有“主页”链接是纯白色的。其余链接不那么明亮。我正在尝试创建一个以图片为背景的透明导航栏。我已经设法做到了，但是“主页”链接比其他链接更亮、更突出。图像如下所示:

      <div class="container-fluid p-0">
     <nav class="navbar navbar-expand-lg fixed-top navbar-dark">
      <a class="navbar-brand" href="#">
        <i class="fas fa-mountain fa-2x mx-3"></i>Greatness</a> <!--This is the icon for the brand-->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" 
         aria-controls="navbarNav" aria-expanded="false"
        aria-label="Toggle navigation">
        <i class="fas fa-align-right text-light"></i>
      </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <div class="mr-auto"></div>
        <ul class="navbar-nav justify-content-center">
          <li class="nav-item active">
            <a class="nav-link" href="indexHome.html">HOME</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="AboutUs.html">ABOUT US
                <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">IDEAS</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">MOTIVATION</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">LOG IN</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

CSS

.nav-item:last-child{ 
    padding-right: 10.5em;

}
.nav-item{  
    padding: 0.9em;
    color: white;
    font-size: 17px;

}
.navbar-brand{  
    padding-left: 8em;
}

Answer 1

这是因为 active class在 li 中定义包裹在它周围，例如 <li class="nav-item active"> .添加active class给它的 sibling ，它应该可以工作。