引导类导航栏灯不允许我更改 A 标签的文本颜色

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

尝试删除导航栏灯类，使其工作，但是当我调整屏幕宽度时，移动用户获取导航的 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>

发生这种情况是因为您的.nav-linkCSS 特异性不比 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之间没有空格，在这种情况下，您的 HTML 将如下所示：

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

要记住的一些经验法则：

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

仅在覆盖外部 CSS 的特定于页面的 CSS 上使用！important(来自外部库，如 Bootstrap 或 normalize.css)。
切勿在编写插件/混搭时使用！important。
切勿在站点范围的 CSS 上使用！important。

在覆盖其他样式的情况下，您可以随时尝试在 CSS 样式属性声明中使用!important。

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

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

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

.container p .specific {
color: white;
}
.container p {
color: black;
}

上面的第一条规则将覆盖第二条规则，因为它更具体。如果有一种方法可以在自己的CSS规则中更具体，那么您可以在不使用!important甚至更疯狂的JavaScript的情况下设置CSS规则。

相关内容

最新更新

热门标签：