导航栏项目的文本颜色不反映自定义 CSS [重复]
Posted
技术标签:
【中文标题】导航栏项目的文本颜色不反映自定义 CSS [重复]【英文标题】：Text color of nav bar items not reflecting custom CSS [duplicate] 【发布时间】：2021-08-16 18:28:15 【问题描述】：我的导航栏文本的颜色没有改变。我猜我正在使用默认导航栏。我对 Bootstrap 很陌生，我已经搜索了互联网，但似乎没有任何效果。
/*Navigation bar*/
.menu-bar
background-color: #101010;
*
font-family: 'Poppins', sans-serif;
.nav-link
font-size: 24px;
color: #FFFFFF;
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<div class="header">
<div class="menu-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="../assets/Icon.svg" > </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<main>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>我知道在 color(.nav-link) 前面写 important 会使我的代码工作，但我在一篇文章中读到这不是一个好习惯这样做。我试图在网上观看教程，但它对我不起作用（虽然它对他们起作用:)。
【问题讨论】：
【参考方案1】：在您的 CSS 代码中，尝试将您的选择器 .nav-link 更改为 .navbar-light .navbar-nav .nav-link，如下所示：
.navbar-light .navbar-nav .nav-link
font-size: 24px;
color: #FFFFFF;
事实上，为了给这个元素应用样式，Bootstrap 使用选择器.navbar-light .navbar-nav .nav-link，它比你的更具体。在 CSS 中，将应用最具体的选择器。
更多关于 CSS 特殊性的信息：https://www.w3schools.com/css/css_specificity.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stiks</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<style>
/*Navigation bar*/
.menu-bar
background-color: #101010;
*
font-family: 'Poppins', sans-serif;
.navbar-light .navbar-nav .nav-link
font-size: 24px;
color: #FFFFFF;
</style>
</head>
<body>
<div class="header">
<div class="menu-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="../assets/Icon.svg" > </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<main>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>【讨论】：
您可以从问题帖子中复制 sn-p 并将您的解决方案应用于它。我不确定它是否有效。不过，这是正确的方法。【参考方案2】：尝试为 header 提供一个 id，然后像这样相应地更改 css，这就是您如何更改应用 css 样式的首选项
<div class="header" id="myId">
#myId .menu-bar
background-color: #101010;
#myId .nav-link
font-size: 24px;
color: #FFFFFF;
【讨论】：
在我看来，CSS 中的 ID 并不理想。一方面，它们不可重复使用。另一方面，它们需要更多标记。 @isherwood 代替 Id 也可以给出一个类。这个想法是这样的，它将被给予更多的优先权。以上是关于导航栏项目的文本颜色不反映自定义 CSS [重复]的主要内容，如果未能解决你的问题，请参考以下文章