將 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 ....> 。 並且不包含導航品牌

我想應用另一個標簽為<ul>但有一個名為“ dropdown-menu ”的類

對此最簡單和最好的方法是什么？

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 { ... }