Применение стилей CSS ко всем элементам внутри навигации только к тегам

Question

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-static-top marginBottom-0" style="padding-bottom: 0px; padding-top: 0px;" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">
      <img src="~/images/logo_sm.png" width="280" height="60" alt="nj transit logo" /> Text - Company Name
    </a>
  </div>
  ....
</nav>

Я хочу применить класс (nav-link) только к тегу которого <a ....>. и не содержит nav-brand

Я хочу применить другой класс с тегом <ul>, но с классом "dropdown-menu"

Какой самый простой и лучший подход к это? * * 1013

Answer 1

.navbar-brand{
    /* Every element who has this class will styled by code here. */
}

a.navbar-brand{
    /* Every and only 'a' element who has this class will styled by code here.
    Note that this class inherits all code under .navbar-brand above. 
    Also note that that there's no space between 'a' and 'navbar-brand'. 

    If there is any space, then every child element under <a> who has this class will get styled.  */
}

a .some-class{
    /* Every element who has the class some-class where its parent is <a> will get styled by this.

    eg:-
    This will get styled -> <a><div class="some-class"></div><a> 
    This will not get styled -> <div class="some-class"></div>
*/
}

Answer 2

Просто сделайте что-то вроде .navbar a { ... }

Это будет предназначаться для всех a тегов в элементе с классом .navbar

Для вашего списка, ul.dropdown-menu { ... }