Question

你好我是html和CSS的新手，我正在使用bootstrap来创建一个网站。我想改变右侧导航栏上活动按钮的颜色。还想在我看到一些例子时改变文本颜色，但我无法将其应用于此示例。提前致谢。

HTML：

<div class="Menu">
  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-  toggle="collapse" data-target="#navbar">
          <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-left" href="http://www.website.com"> <img src="Logo.png" alt="LOGO">
        </a>
      </div>
      <div id="navbar3" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</div>

CSS：

navbar-right{
    padding-top: 35px;
}

img {
    padding-top: 17px;
    padding-left: 17px;
}

.jumbotron {
    padding-top: 10px;
    padding-bottom: 48px;
    border: 2px solid black;
}

.navbar-inverse .navbar-nav > li > a {
    color: green;
} 

.navbar3 > .navbar-nav .navbar-right>.active {
    color:red;
    background-color:yellow;

}
.navbar3 > .navbar-nav .navbar-right>.active > a,
.navbar3 > .navbar-nav .navbar-right>.active > a:hover,
.navbar3 > .navbar-nav .navbar-right>.active > a:focus{
    color:red;
    background:blue;
}

Answer 1

尝试使用此css来超越Bootstrap css规则：

.navbar-inverse .navbar-nav>.active>a{
  background-color:red
}

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover{
  color:red
} 

#navbar3 .navbar-nav>.open>a, #navbar3 .navbar-nav>.open>a:focus, #navbar3 .navbar-nav>.open>a:hover{
  background-color:red
}

这是工作演示：https://jsfiddle.net/8ryewrn3/2/

Answer 2

修复后你的css会有一些错误：

您使用的是.navbar3，而class不是id所以您应该使用#navbar3
.navbar-nav和.navbar-right之间也有空格但不应该是空格.navbar-nav.navbar-right而不是.navbar-nav .navbar-right

所以你的CSS必须是这样的：

#navbar3 > .navbar-nav.navbar-right>.active > a,
 #navbar3 > .navbar-nav.navbar-right>.active > a:hover,
 #navbar3 > .navbar-nav.navbar-right>.active > a:focus{
    color:red;
    background:blue;
}

这将更改活动按钮，更改悬停，您应该这样做：

#navbar3 > .navbar-nav.navbar-right>li>a:hover{
  color:yellow;
}

这是工作演示：https://jsfiddle.net/o2dr4w8e/

bootstrap更改导航栏，CSS，HTML上的活动按钮

2 个答案: