bootstrap navbar背景、字体颜色及鼠标悬停、点击效果修改部分失效？

Question

采用bootstrap框架，在写顶部导航栏时修改颜色只有部分有效，另外鼠标点击后效果也无效，请高手指点一下。
我想实现的效果：navbar-header中的字体颜色也改成aqua，鼠标悬停颜色变深。
点击后不变色。
不知道为什么只有部分有效，右边三个图标类型不是完全一样么，我的浏览器上只有中间一个图标鼠标悬停颜色变深。
代码如下：

<!-- 导航栏 -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="/index">Penguin's blog</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="dropdown"><a href="/post" class="dropdown-toggle" data-toggle="dropdown">文章<b class="caret"></b> </a>
                <ul class="dropdown-menu">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                </ul>
            </li>
            <li><a href="#">相册</a> </li>
        </ul>
    </div>
    <!-- social -->
    <!-- 用font-awesome显示小图标 -->
    <div class="nav navbar-nav navbar-right">
        <li><a href="https://github.com/penguin-penpen" target="_blank"><i class="icon icon-github"></i> </a></li>
        <li><a href=mailto:xxx@outlook.com><i class="icon icon-envelope"></i> </a></li>
        <li><a href="http://www.linkedin.com/in/"><i class="icon icon-linkedin"></i></a></li>
    </div>
</nav>

css代码:

.navbar{
    margin-bottom: 0px;
    border-radius: 0px;
    background: #333;
}
.navbar .nav > li > a{
    color: aqua;
    background-color: #333;
}
.navbar .nav > li > a:hover {
    color: aqua;
    background-color: #282828;
}
.navbar .nav >li >a:active{
    color: aqua;
    background-color: #282828;
}
.navbar .nav >li >a:visited{
    color: aqua;
    background-color: #333;
}
.navbar .nav > li .dropdown:active {
    color: aqua;
    background-color: #282828;
}
.navbar .nav > li .dropdown-menu {
    margin: 0;
}
.navbar .nav > li:hover .dropdown-menu {
    display: block;
}

.navbar-nav>.active>a:hover{
    color:#555;
    background-color:#282828}

.navbar-right{
    margin-right: 5px;
}
.nav .navbar-nav .navbar-right >li >a:hover {
    color: aqua;
    background-color: #282828;
}

初接触前端开发，css用得还不是很熟悉，还望谅解。

Answer 1

你用的是什么浏览器？