Bootstrap-4 Navbar - 如何仅在父级上使用“活动”类

Question

在 Bootstrap 4 中设置导航栏样式时，我有一个下拉菜单。我想在下拉项处于活动状态时突出显示它。但是，当我使用“活动”类时，所有子项（子项）也会获得突出显示效果。这看起来很难看。 在随附的示例中，我不希望突出显示“Link dd1”和“Link dd2”。

如何仅突出显示父菜单项而没有子项？谢谢大家。

Fiddle with code sample

代码：

<style>
#x
 .active a{color:yellow ; background-color:brown;}

</style>
<nav id="x" class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown active">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link dd1</a>
        <a class="dropdown-item" href="#">Link dd2</a>
      </div>
    </li>
  </ul>
</nav>
<br>

<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu in the navbar.</p>
</div>

Answer 1

之所以将所有子项也都高亮显示是因为您通过 CSS 告诉过它：

#x .active a {
    color:yellow; 
    background-color:brown;
}

您是说请突出显示活动菜单上的所有锚标记。

如果您只想突出显示父菜单，请具体说明：

#x .active a.nav-link {        
    color:yellow; 
    background-color:brown;
}

演示： https://jsfiddle.net/davidliang2008/aq9Laaew/285539/

甚至

#x .active > a {        
    color:yellow; 
    background-color:brown;
}

演示： https://jsfiddle.net/davidliang2008/aq9Laaew/285541/

会做的。