CSS 选择器 Bootstrap 导航栏菜单链接

Question

这里是 Bootstrap 新手。无法找到正确的选择器来为菜单中的链接着色。我尝试过 .nav a:link, a:hover 但超链接和悬停颜色保持默认的蓝色/灰色。

<div class="navbar navbar-static-top">
    <div class="containerNav">
        <div class="navbar-header"> <a href="#" class="navbar-brand">Test</a>

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">  <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

            </button>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a>
                </li>
                <li><a href="#">Blog</a>
                </li>
                <li class="dropdown">   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social media <b class = "caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Twitter</a>
                        </li>
                        <li><a href="#">Facebook</a>
                        </li>
                        <li><a href="#">Google+</a>
                        </li>
                        <li><a href="#">Instagram</a>
                        </li>
                    </ul>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#contact" data-toggle="modal">Contact</a>
                    </li>
            </ul>
        </div>
        <!-- end container -->
    </div>
</div>
<!-- end nav bar -->

使用 Bootstrap 3.2。 http://jsfiddle.net/nwjob2e0/ 。 (在 JS fiddle 中，我的图标栏隐藏在“结果”下方，因此如果您按该列表，列表应该展开，您就可以明白我的意思。 http://jsfiddle.net/nwjob2e0/#&togetherjs=ioVBLnT3mA - 合作

Answer 1

试试这个:

.navbar .navbar-nav > li > a {
  color: #999;
}

对于事件、悬停、焦点:

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
  color: #fff;
  background-color: #000;
}

更新:

要修改下拉菜单(例如示例中的社交媒体菜单):

.navbar .navbar-nav .open .dropdown-menu {
    background-color: green;
  }
  .navbar .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar .navbar-nav .open .dropdown-menu > li > a:focus {
    background-color: red;
  }

<强> Check JSFiddle Demo

更新2:

您也可以使用 This Online Tool 轻松生成 Bootstrap NavBar。