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

Question

在这里启动新手。无法找到正确的选择器来为菜单中的链接着色。我试过 .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 -->

使用引导程序 3.2。 http://jsfiddle.net/nwjob2e0/ 。 （在 JS fiddle 中，我的图标栏隐藏在它显示“结果”的位置下，因此如果您按下该列表应该展开并且您可以看到我的意思。 http://jsfiddle.net/nwjob2e0/#&togetherjs=ioVBLnT3mA - 合作

Answer 1

试试这个：

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

对于 Active、Hover、Focus：

.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。