我不知道为啥我的代码导航栏文本颜色没有改变？ [复制]
Posted
技术标签:
【中文标题】我不知道为啥我的代码导航栏文本颜色没有改变？ [复制]【英文标题】：I don't know why navbar text color is not changing for my code? [duplicate]我不知道为什么我的代码导航栏文本颜色没有改变？ [复制] 【发布时间】：2019-12-07 16:34:21 【问题描述】：我正在尝试使用引导程序和 CSS 制作导航栏。我尝试了很多方法，但要更改导航栏文本颜色，但除了内联 CSS 外，没有任何方法可以工作。任何人都可以帮助我解决我的问题。
<!DOCType html>
<html>
<head>
<title>My Second Class Assignment</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand" href="#">
<img src="image/logo.png" class="d-inline-block align-top" >
</a>
</li>
<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="#">PAGES</a>
</li>
<li class="nav-item">
<a class="nav-link text-blue" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link text-blue" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<!---javascript--->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/bootstrap.min.js" rel="stylesheet"></script>
</body>
</html>
CSS 文件
/* CSS */
a
color:#ff6347;
font-size: 20px;
【问题讨论】：
检查浏览器中的元素并找出将哪个规则应用于元素/导航。它应该是一些引导规则。复制该规则并粘贴到您的样式表中并应用样式。 @Zim 我尝试了这些方法，但没有找到适合我的方法。 【参考方案1】：使用
引导样式导航链接.navbar-light .navbar-nav .nav-link
color: rgba(0,0,0,.5);
因此，要覆盖，您需要在原始样式之后包含相同级别（或更高）的特异性。裸锚样式不足以改变链接的样式，这就是颜色不会改变的原因
More information about css specificity
【讨论】：
谢谢。给大家。它正在工作。 :)【参考方案2】：这样瞄准
.navbar-light .navbar-nav .nav-link
color:#ff6347;
font-size: 20px;;
https://jsfiddle.net/lalji1051/xda1sur5/3/
【讨论】：
谢谢。给大家。它正在工作。 :)【参考方案3】：CSS 选择器具有特殊性。您应该避免使用 !important 指令，因为它会使您的代码难以维护和扩展。
相反，您需要为您的选择器添加等效或更多的特异性：
.navbar-nav .nav-item a.nav-link
color: #ff6347;
font-size: 20px;
【讨论】：
谢谢。给大家。它正在工作。 :)以上是关于我不知道为啥我的代码导航栏文本颜色没有改变？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章