第二个引导导航栏上的样式下拉菜单

Question

我已将主页上的主导航栏设置为与该页面的设计相匹配，但我有其他页面需要在自己的页面上具有不同的字体颜色、悬停等。我将.navbar-gallery 类添加到<nav> 中，这使我可以设置整个导航栏的背景颜色，但我现在需要更改下拉菜单中字体的颜色。我的问题是我似乎不能只针对这个特定导航栏上的.navbar ul.navbar-right li.dropdown ul.dropdown-menu li a。我尝试向ul.dropdown-menu 添加一个类.gallerydropdown，但浏览器会忽略它。我敢肯定，我缺少一个相当简单的答案。

这是我的完整导航栏：

<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 选择器：

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

演示JSFiddle.

更新

如果您正在寻找每页覆盖，您可以将一个类添加到每个页面的 <body> 标记并执行以下操作：

<body class="about">
<!-- or -->
<body class="contact">

.about .navbar ul.navbar-right li.dropdown ul.dropdown-menu li a {
    color: green;
}
.contact .navbar ul.navbar-right li.dropdown ul.dropdown-menu li a {
    color: green;
}