Question

我正在使用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>

Answer 1

之所以会发生这种情况，是因为您的.nav-link CSS specificity并不比Bootstrap中定义的强。

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

.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;
}

注意同一级别的示例（.root-project-name和.navbar-light之间有 NO SPACE ，在这种情况下，您的HTML看起来像这样：

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

要记住的一些经验法则：

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

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

在编写插件/混搭程序时，切勿使用！important。

切勿在整个站点范围的CSS上使用！important

Answer 2

如果要覆盖其他样式，则始终可以尝试在CSS样式属性声明中使用!important。

例如，如果navbar-light类为文本提供白色，则可以通过在CSS中设置文本来覆盖它：

.text-element {
    color: black !important;
}

使用!important并不是您的第一个解决方案，但是它对测试很有用，如果有第三方库或框架以某种方式设置CSS规则，则可以偶尔使用它。如果设置!important确实改变了文本颜色，那么您可以尝试查看浏览器开发工具中CSS规则的特殊性。例如：

.container p .specific {
   color: white;
}

.container p {
    color: black;
}

上面的第一条规则将覆盖第二条规则，因为它更具体。如果有一种方法可以使自己的CSS规则更加具体，则可以使用CSS规则设置所需的样式，而无需使用!important甚至是更疯狂的JavaScript。

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

2 个答案: