更改 twitter bootstrap 导航栏项目的颜色答案

【问题标题】：Changing color of twitter bootstrap nav bar item更改 twitter bootstrap 导航栏项目的颜色
【发布时间】：2021-01-26 05:16:36
【问题描述】：

我对网络没有太多经验。首先，我在这里参考了这篇文章，但在我的情况下无法正常工作。 changing last item color if navbar

我正在尝试将每个导航栏菜单项的颜色更改为红色，但无法正常工作。其次，如果我想为 id="active" 的 href 项设置单独的样式。如何在我的 CSS 中引用该特定项目。请帮忙。

这是我的身体。

<body>
<div class="container mt-3">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">

<a href="" class="navbar-brand">KGS</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#target">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="target">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" id="active" class="nav-link">Home</a>
</li>

<li class="nav-item">
<a href="#" class="nav-link">Our Clients</a>
</li>
   
</ul>
</div>
</nav>
</div>
    
</body>

现在在 default1.css 中，我正在做这样的事情。但是，当我将鼠标悬停在某个项目上时，我可以看到蓝色。同样，我希望每个导航栏项目都是红色的，但我无法让它工作。请帮忙。

.navbar-nav > li > a{
        color:red;
    }
    
        .navbar-nav > li:hover a{
        background: blue;
        border-radius: 7px 7px 0px 0px;
        color: #2056ac;
}

【问题讨论】：

你想改变文本颜色还是导航栏项的背景颜色？
我想改变文字的颜色。

标签： html css bootstrap-4 navbar

【解决方案1】：

Bootstrap 带有一些预定义的样式，所以为了覆盖它们，一个简单的方法是在你的 CSS 中使用关键字!important。如果省略此关键字，则由于 Bootstrap 的默认样式，您不太可能会看到颜色发生变化，因此我建议您添加它。

CSS

.nav-link, .navbar-brand{
    color: red!important;
}

#active{
    color: blue!important;
}

见codeply：https://www.codeply.com/p/pLDEIidtkA

【讨论】：

@nikhil 您需要更多帮助吗？
不用了，非常感谢。这应该就是全部了。如果我需要帮助，我会发布一个新问题并标记你。
你能帮我解决这个问题吗，stackoverflow.com/questions/64309894/…