Question

我在主页上设置了主导航栏以匹配该页面的设计，但我还有其他页面需要在自己的页面上使用不同的字体颜色，悬停等。我将类.navbar-gallery添加到<nav>，这允许我设置整个导航栏的背景颜色，但我现在需要在下拉菜单中更改字体的颜色。我的问题是我似乎无法定位此特定导航栏上的.navbar ul.navbar-right li.dropdown ul.dropdown-menu li a。我尝试将一个类.gallerydropdown添加到ul.dropdown-menu，但浏览器会忽略它。我确信我错过了一个相当简单的答案。

这是我的完整导航栏：

<nav class="navbar-gallery navbar navbar-default">
<div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <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-gallery" href="index.html">ReFace It</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Galleries<span class="caret"></span>
        </a> 

        <ul class="dropdown-menu gallerydropdown"> 
          <li class="gallery"><a href="stone.html">Stone</a></li> 
          <li><a href="#">Brick</a></li> 
          <li><a href="#">Stucco</a></li> 
          <li><a href="#">Stone/Stucco</a></li>
          <li><a href="#">Brick/Stucco</a></li>
        </ul> 
      </li>
      <li><a href="#contact" class="page-scroll sm-button">Get In Touch</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

所以我试图定位本节的CSS：

<ul class="dropdown-menu gallerydropdown"> 
   <li class="gallery"><a href="stone.html">Stone</a></li> 
   <li><a href="#">Brick</a></li> 
   <li><a href="#">Stucco</a></li> 
   <li><a href="#">Stone/Stucco</a></li>
   <li><a href="#">Brick/Stucco</a></li>
</ul>

这是我的CSS：

.navbar {


margin-bottom: 50px;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  color: #FFFFFF;
  background: transparent;
  border: none; }
  .navbar .navbar-header a.navbar-brand {
    color: #FFFFFF;
    font-weight: 500;
    font-size: 1rem;
    text-transform: uppercase; }
  .navbar ul.navbar-right {
    padding-right: 20px; }
    .navbar ul.navbar-right li a {
      color: #FFFFFF;
      font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
      text-transform: uppercase;
      font-weight: 500; }
      .navbar ul.navbar-right li a:hover {
        color: #cccccc; }
      .navbar ul.navbar-right li a:visited {
        color: #FFFFFF; }
    .navbar ul.navbar-right li a.sm-button {
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
      border: none;
      padding: .3em 1.1em;
      margin-top: 0.6rem;
      background-color: #f42e4e;
      color: #ffffff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-family: "PT Sans", sans-serif;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      -webkit-border-radius: 180px;
      -moz-border-radius: 180px;
      -ms-border-radius: 180px;
      border-radius: 180px;
      max-width: 150px;
      text-align: center; }
      @media (min-width: 768px) {
        .navbar ul.navbar-right li a.sm-button {
          max-width: 175px; } }
      .navbar ul.navbar-right li a.sm-button:hover {
        background-color: #dc2946; }
    .navbar ul.navbar-right li.dropdown {
      background: transparent; }

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
  background-color: transparent;
  color: #FFFFFF; }

.dropdown-menu {
  background-color: #FFFFFF;
  padding: 0; }

.navbar ul.navbar-right li.dropdown ul.dropdown-menu li a {
  color: #3C3C3E; }
  .navbar ul.navbar-right li.dropdown ul.dropdown-menu li a:visited {
    color: #3C3C3E; }
  .navbar ul.navbar-right li.dropdown ul.dropdown-menu li a:hover {
    background-color: #cccccc; }

.navbar-default .navbar-toggle .icon-bar {
  background-color: #ddd; }

.navbar-default .navbar-toggle:hover {
  background-color: transparent; }

.navbar-gallery {
  background: #3C3C3E;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0; }
  .navbar-gallery .navbar-header a.navbar-brand-gallery {
    color: #FFFFFF;
    font-weight: 500;
    font-size: 1.5rem;
    text-transform: uppercase;
    float: left;
    padding: 15px 15px; }
    .navbar-gallery .navbar-header a.navbar-brand-gallery:hover {
      text-decoration: none; }
  .navbar-gallery .navbar-default .navbar-nav > .open > a, .navbar-gallery .navbar-default .navbar-nav > .open > a:focus, .navbar-gallery .navbar-default .navbar-nav > .open > a:hover {
    background-color: #3C3C3E;
    color: #FFFFFF; }
  .navbar-gallery .dropdown-menu {
    background-color: #3C3C3E;
    padding: 0; }
    .navbar-gallery .dropdown-menu li.gallery a, .navbar-gallery .dropdown-menu li.gallery a:visited {
      color: #FFFFFF; }

Answer 1

这是您要查找的CSS选择器：

 <nav class="navbar navbar-default navbar-fixed-top navbar-header-full">
        <div class="container">
                <div class="header-full-title img-responsive">
                    <img src="~/Content/img/MTC_logo_header.png" class="img-responsive" />
                </div>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <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" href="#">
                        <img src="~/Content/img/MTC_logo_header.png" class="img-responsive" alt="">
                    </a>*@
                </div>
                <div id="navbar" class="navbar-collapse collapse">


                    <ul class=" nav navbar-nav navbar-right">
                        <li><a href="#" class="navStyle">OUR STORY</a></li>
                        <li><a href="#" class="navStyle">VISIT</a></li>
                        <li><a href="#" class="navStyle">DIRECTORY</a></li>
                        <li><a href="#" class="navStyle">CONDOS</a></li>
                        <li><a href="#" class="navStyle">APARTMENTS</a></li>
                        <li class="dropdown">
                            <a href="#" class="navStyle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EVENTS</a>
                            <ul class="dropdown-menu dropDownMTC pull-right">
                                <li><a href="#">YOGA ROCKS THE PARK</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">MONDAY NIGHT MOVIES</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">HORSES OF HONOR</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">THURSDAY IN THE PARK</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">EVENT SHUTTLE</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">HOLIDAY LIGHTS FESTIVAL</a></li>
                            </ul>
                        </li>
                        <li><a href="#" class="navStyle">NEWS</a></li>
                    </ul>
                </div>
        </div>

    </nav>

演示JSFiddle。

更新

如果您要查找每页覆盖，可以在.header-full-title { float: left; padding-left: 20px; }代码foreach页面添加一个类，然后执行以下操作：

.navbar-gallery .dropdown-menu > li > a {
    color: royalblue;
}

<body>

第二个Bootstrap Navbar上的样式下拉菜单

1 个答案:

更新