时间戳

首页 > 解决方案 > Bootstrap 类 navbar-light 不允许我更改 A 标签的文本颜色

html - Bootstrap 类 navbar-light 不允许我更改 A 标签的文本颜色

问题描述

我正在使用 bootstrap css 创建一个网站以使其更快更容易，但是我遇到了一个问题，即当 navbar-light 存在时无法更改字体颜色，但当 navbar-light 不存在时我可以更改它。

尝试删除使其工作的 navbar-light 类，但是当我调整屏幕宽度时，移动用户获取导航的 3 行内容不起作用。

body {
    margin: 0%;
    padding: 0%;
}

/* Branding */
.navbar-brand {

}

/* Navigation class */
.navbar {
    background-color: #3bb558;
}

/* Ul element for navigation */
.navbar-nav {
}

/* List items for navigation */
.nav-item {
}

/* A tag for navigation */
.nav-link {
    color: white;
}
<body>
    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#">
            <img src="/img/logo.png" width="150" height="50">
        </a>
            <!-- On smaller screens there will be a button for dropdown navigation. -->
        <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">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Runescape Max Main Rentals</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Runescape PK Rentals</a>
                </li>
            </ul>
        </div>
    </nav>    
</body>

标签： htmlcss

解决方案

发生这种情况是因为您的.nav-link CSS 特异性并不比 Bootstrap 中定义的更强。

在navbar-light添加的 BT4 中，这是默认的 CSS .nav-link：

.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.5);
}

在使用一些 CSS 库时，最好的覆盖方法是复制并粘贴他们自己的 CSS 选择器并在其他地方更改它，只要确保它稍后加载即可。

所以，你的解决方案是这样的：

.navbar-light .navbar-nav .nav-link {
    color: white;
}

在您的情况和最佳实践中，您可以在根级别或同一级别添加自己的前缀 CSS，这将使 CSS 特异性更强。

在根级别：

.root-project-name .navbar-light .navbar-nav .nav-link {
    color: white;
}

在同一级别：

.root-project-name.navbar-light .navbar-nav .nav-link {
    color: white;
}

请注意同一级别的示例（和之间没有空格，在这种情况下，您的 HTML 将如下所示：.root-project-name.navbar-light

<div class="root-project-name navbar-light">
 ....
</div>

要记住的一些经验法则：

在考虑 !important 之前，请始终寻找一种使用特异性的方法

仅在覆盖外部 CSS（来自外部库，如 Bootstrap 或 normalize.css）的特定于页面的 CSS 上使用 !important。

编写插件/mashup 时切勿使用 !important。

永远不要在站点范围的 CSS 上使用 !important

推荐阅读