关于在Bootstrap 3中覆盖Navbar样式的问题

Question

我正在尝试生成一个自定义的nabar，它看起来像JSFIDDLE THIS LINK处的单独按钮，如下图所示：

因为我的页面中有两个导航栏，所以我将第一个导航栏包装在一个名为.firstnav的div包装器中：

<div class="firstnav">
  <nav class="navbar navbar-default navbar-right" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header ">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
   <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 hidden-lg hidden-sm hidden-md "  href="#">Teddy Bear Childcare</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">
    <li class="active"><a href="index.php?page_id=4">Home</a></li>
    <li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="index.php?page_id=18">About Us</a></li>
    </ul>
    </li>
     <li class="nice"><a href="index.php?page_id=15">Programs</a></li>
    <li class=""><a href="index.php?page_id=25">Testimonial</a></li>
     </ul>
    </div>
<!-- /.navbar-collapse -->
</nav>
</div><!--/ End of navbar row-->

对于CSS，我试图使用.firstnav >来定位元素，这对我来说无效，到目前为止！这是我对CSS的代码

.firstnav > .navbar-default, 
.firstnav > .navbar-right {
background-color:none !important;
border-color:none !important;
}
.firstnav > .navbar-nav > li {
float: left;
background: rgba(250,172,84,1);
background: -moz-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(250,172,84,1)), color-stop(100%, rgba(245,142,35,1)));
background: -webkit-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
background: -o-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
background: -ms-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
background: linear-gradient(to bottom, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faac54', endColorstr='#f58e23', GradientType=0 );
margin-left:8px;
border:#fff 4px solid;
border-radius:25px;
color:white;
width:120px;
}
.firstnav >  .navbar-nav > li > a {
    padding-top: 12px;
    padding-bottom: 12px;
    color:white;
    font-weight:bold;

  }

你能告诉我我做错了什么吗？

Answer 1

第一条规则不起作用，因为您无法将none用作background-color属性的值;而是使用background简写（因为你试图覆盖的是一个渐变） - 你也不能使用none作为border-color的值 - 将其恢复为初始值使用transparent

.firstnav > .navbar-default, 
.firstnav > .navbar-right {
    background: none !important;
    border-color: transparent !important;
}

使用.firstnav > .navbar-nav的最后两条规则不起作用，因为>选择了给定元素的子。 .navbar-nav不是.firstnav的孩子，因此不适用这些规则。

而不是>只需在.firstnav＆amp;之间使用space。 .navbar-nav：http://jsfiddle.net/52VtD/579/

.firstnav .navbar-nav > li {
    float: left;
    background: rgba(250,172,84,1);
    background: -moz-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(250,172,84,1)), color-stop(100%, rgba(245,142,35,1)));
    background: -webkit-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
    background: -o-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
    background: -ms-linear-gradient(top, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
    background: linear-gradient(to bottom, rgba(250,172,84,1) 0%, rgba(245,142,35,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faac54', endColorstr='#f58e23', GradientType=0 );
    margin-left:8px;
    border:#fff 4px solid;
    border-radius:25px;
    color:white;
    width:120px;
}

.firstnav .navbar-nav > li > a {
    padding-top: 12px;
    padding-bottom: 12px;
    color:white;
    font-weight:bold;
}

Answer 2

只是添加到Reconstuct的答案中，获得我的规则是box-shadow规则

.navbar-default .navbar-nav > .active > a {
    ...
    -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
}

将它们都设置为none，并且不会在背景中产生令人讨厌的阴影。