将 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) class 应用到标签为 <a ....> 的人。并且不包含导航品牌

我想申请另一个 class，它的标签是 <ul> 但有一个 class 叫做“dropdown-menu”

最简单、最好的方法是什么？

Answer 1

只需做类似 .navbar a { ... }

的事情

这将针对具有 class .navbar

的元素中的所有 a 标签

对于您的列表，ul.dropdown-menu { ... }

Answer 2

.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>
*/
}

将 CSS 样式应用于导航内的所有元素，仅应用于标签

Applying CSS styles to all elements inside a nav to only a tags

html

css

nav