Bootstrap - 无法覆盖伪类的属性

Question

我基本上试图完成悬停效果。我似乎不能使用下面的代码伪类的属性来覆盖：

CSS：

<style type="text/css"> 
     li:hover 
     { 
      color: #000000 !important; 
      background-color: #ff8c00; 
     } 
    </style> 

HTML：

  <nav class="navbar-inverse"> 
        <ul class="nav nav-justified" style="font-size: 1.3em;"> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#" style="color:white;">About Us</a></li> 
         <li><a href="#" style="color:white;">Contact</a></li> 
         <li><a href="#" style="color:white;">Sign Up</a></li> 
         <li><a href="#" style="color:white;">Login</a></li> 
        </ul> 
     </nav> 

如果我从取出的nav类ul元素，悬停功能工作正常，但结构看起来非常丑陋。我怎样才能使这个工作？

更新：

上传于jsfiddle

Answer 1

我的代码，你需要指定这样的CSS：

<style type="text/css"> 
     .nav>li>a:hover 
     { 
      color: #000000; 
      background-color: #ff8c00; 
     } 
    </style> 

这样，类nav用最直接的嵌套子li和a标签与伪类:hover将被选中，bootstrap标准将被覆盖。

Answer 2

活动类将无法工作，因为规则只在:hover 指定要应用上的活动样式，以及你将不得不调用CSS的活动类以及

.nav>li>a:focus, 
.nav>li>a:hover, 
.nav>li>a:active 
{ 
    color: #000000; 
    background-color: #ff8c00; 
}