更改 Bootstrap Navbar 3.4.1 的字体颜色

Question

嗨，我想更改引导导航栏链接的字体颜色，并且已经尝试将特定的 class 设置为导航栏，就像在与此类似的其他帖子中建议的那样。 但是，我只设法更改了导航栏品牌的字体。 你能给点建议吗？ 我的特异性有问题吗？

 header{ margin-top: 1em; }.navbar-main{ background-color: #00cc99; }.navbar.navbar-www{ color: white; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <nav class="navbar navbar-default navbar-main"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand navbar-www">Kau Unlimited</a> </div> <ul class="nav navbar-nav navbar-www"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact Us</a></li> </ul> <ul class="nav navbar-nav navbar-right"></ul> </div> </nav>

我仍然是编码和尝试避免的绝对初学者。重要并且仍在学习特异性。 谢谢！

Answer 1

 header{ margin-top: 1em; }.navbar-main{ background-color: #00cc99; }.navbar-www li a{ color: white;important;

 <header> <nav class="navbar navbar-default navbar-main"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand navbar-www">Kau Unlimited</a> </div> <ul class="nav navbar-nav navbar-www"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact Us</a></li> </ul> <ul class="nav navbar-nav navbar-right"></ul> </div> </nav> </header>

Answer 2

尽量避免.important，因为这是一个坏习惯。 您可以通过向导航栏添加一些额外的类或可以是任何 ID 来覆盖引导程序 CSS。

这是更改导航链接文本颜色的方法

.navbar-www.navbar-brand li a{
color:#fff;
}

如果这没有覆盖，请尝试在导航栏中添加一些 id 并使您的 css 代码类似于这样。

#navbar.navbar-www.navbar-brand li a{
color:#fff;
}

您可以轻松地在控制台中查看导航链接引导程序的样式。 您可以通过添加一个额外的选择器来覆盖它，它可以是 class、属性、id 或任何父选择器。

Answer 3

您需要为链接添加颜色，请将.navbar.navbar-www替换为.navbar.navbar-www请在下方查看

 header{ margin-top: 1em; }.navbar-main{ background-color: #00cc99; }.navbar.navbar-www a{ color: white; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <nav class="navbar navbar-default navbar-main"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand navbar-www">Kau Unlimited</a> </div> <ul class="nav navbar-nav navbar-www"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact Us</a></li> </ul> <ul class="nav navbar-nav navbar-right"></ul> </div> </nav>