Bootstrap-4 Navbar - Как использовать «активный» класс только для родителей

Question

При стилизации панели навигации в Bootstrap 4 у меня выпадающий список.Я хочу выделить выпадающий элемент, когда он активен.Однако, когда я использую «активный» класс, все подпункты (дочерние элементы) также получают эффект выделения.Это выглядит некрасиво.В прилагаемом примере я не хочу, чтобы «Link dd1» и «Link dd2» выделялись.

Как выделить родительский элемент меню только без подпунктов?Спасибо всем.

Скрипка с примером кода

Код:

<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/

выполнит работу.