html - Firefox 未在选定菜单上保留 css 样式

Question

我只在 firefox 和 chrome 上测试过，但到目前为止我还无法让样式在 firefox 上正常工作

    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div style="" class="navbar-collapse collapse in">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
    </div>
   </div>

风格是

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:active 
{
color: #9DE0AD !important;
}

我认为这是 Bootstrap 在某些时候覆盖样式的问题

例如，如果我点击了关于菜单，然后将鼠标移开，那么文本的颜色是错误的

这是一个例子

(免费主机(抱歉)):http://free-world.site40.net/

Answer 1

在你的 bootstrap.css 中有一条规则:

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus
background-color: transparent;
color: #333;
}

请尝试使用以下方法进行覆盖:

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus
color: #9de0ad !important;
}