Question

我已经尝试了很多不同的选项让类更改navbar上的文本颜色，特别是navbar-brand项。我的.navbar-brand color:purple; css类无效。你能帮我弄清楚我需要把它作为标签，以便我可以改变颜色吗？

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Nicole Santarsiero</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav navbar-right">
            <li class="nav-item">
                <a class="nav-link" href="./index.html">About &nbsp;</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="./portfolio.html">Portfolio</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="./contact.html">&nbsp;&nbsp;Contact</a>
            </li>
            </ul>
        </div>
        </nav>

<style>

    .navbar-light {
        background-color: gray;
    }

    .navbar-brand {
    color: purple;
    } 

</style>

Answer 1

纯CSS：

nav a { color: fuchsia; }

Answer 2

普通css

nav a .navbar-brand { color: fuchsia; }
or
.navbar-light .navbar-brand {
  color: fuchsia;
}

Answer 3

了解CSS Specificity。这告诉浏览器在将样式应用于元素时哪个CSS优先。你需要使用一个CSS选择器，它与相同，或更具体而不是Bootstrap 4 .navbar-brand选择器：

.navbar-light .navbar-brand {
    color: rgba(0,0,0,.9);
}

因此，要覆盖，您可以使用：

.navbar-light .navbar-brand {
    color: purple;
}

https://www.codeply.com/go/D0dUL1I1rW

<小时/> 另见： Bootstrap 4 navbar color

Answer 4

在 bootstrap 4.5 中为我工作

.navbar-brand{
color: blue !important;
}

Boostrap NavBar如何在Navbar-Brand类上更改文本颜色？

4 个答案:

普通css