Question

我尝试将导航栏的背景颜色更改为蓝色，链接颜色变为白色。我无法将导航栏上的链接更改为白色。我没有做对的事。不知道是什么。感谢帮助！

＆＃13;

 .navbar-default  {
	background-color: #2196f3;
	
}
.navbar a{
	color:white;
}

＆＃13;

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Home</title>
	<link rel="stylesheet"  href="css/bootstrap/css/bootstrap.min.css">
	
	<link rel="stylesheet" type="text/css" href="css/bootstrap/css/index.css">
</head>
<body>
	<nav class="navbar  navbar-fixed-top navbar-default ">
		<div class="container-fluid">
			<div class="navbar-header">
				
				<a class="navbar-brand" href="#">Home</a>
			</div>
			<ul class="nav navbar-nav navbar-left">
				<li><a href="#">Shop</a></li>
				<li><a href="#">Drive</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">Zipcode</a></li>
				<li><a href="#">Help/FAQ's</a></li>
				<li><a href="#">Conatct us</a></li>
			</ul>
		</div>
	</nav>
<script src = "js/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

Answer 1

您需要更加具体的CSS规则。见Specificity

工作示例：

＆＃13;

.navbar.navbar-default {
  background-color: #2196f3;
}
.navbar.navbar-default ul > li > a,
.navbar.navbar-default .navbar-brand {
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-default ">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <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" href="#">Home</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Shop</a>
        </li>
        <li><a href="#">Drive</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Zipcode</a>
        </li>
        <li><a href="#">Help/FAQ's</a>
        </li>
        <li><a href="#">Conatct us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

Answer 2

Bootstrap有许多默认样式。

你的代码无效是因为bootstrap覆盖了你的css（与@Kirito提到的相同）。

您可以将css更改为此，它可以工作：

.navbar div{
    background-color: #2196f3 !important;

}
.navbar a{
    color:white !important;
}

但是，更好的解决方案是自定义您的引导程序。链接：http://getbootstrap.com/customize/

这种方法可以获得更清晰的代码和更少的问题

Answer 3

删除.navbar a规则集并添加：

/* change brand text color */
.navbar-default .navbar-brand
{
    color:white;
}

/* change list links text color */
.navbar-default .navbar-nav > li > a
{
    color:white;
}

Answer 4

您需要更加具体地了解您的选择器或其他选择器（在bootstrap＆＃CSS;中定义）将适用，因为它们可能更具体

specificity rules

更好地解释了这一点

请参阅下面的示例代码。

＆＃13;

nav.navbar-default {
  background-color: #2196f3;
  background-image: none;
}
nav.navbar-default .navbar-brand,
nav.navbar-default .navbar-nav>li>a {
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<nav class="navbar navbar-fixed-top navbar-default ">
  <div class="container-fluid">
    <div class="navbar-header">

      <a class="navbar-brand" href="#">Home</a>
    </div>
    <ul class="nav navbar-nav navbar-left">
      <li><a href="#">Shop</a>
      </li>
      <li><a href="#">Drive</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Zipcode</a>
      </li>
      <li><a href="#">Help/FAQ's</a>
      </li>
      <li><a href="#">Conatct us</a>
      </li>
    </ul>
  </div>
</nav>


</html>

＆＃13;

无法更改导航栏的字体颜色

4 个答案: