如何解决为什么颜色没有应用到我的引导HTML
我从我的bootsrap导航栏开始。下面是我的基本代码的样子：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 landing page</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" data-value="home" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="projects" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="hobbies" href="#">Hobbies</a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="education" href="#">Education</a>
</li>
</ul>
</div>
</nav>
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
main.css
body{
padding: 0;
margin: 0;
background:#f4f4f4;
}
.navbar{
background:#F97300;
}
.nav-link,.navbar-brand{
color: #f4f4f4;
cursor: pointer;
}
.nav-link{
margin-right: 1em !important;
}
.nav-link:hover{
background: #f4f4f4;
color: #f97300;
}
.navbar-collapse{
justify-content: flex-end;
}
我无法弄清楚为什么未应用这些颜色。
例如，.nav-link的{{1}}（发白）没有应用。我所看到的只是黑色。 color:#f4f4f4也是如此，它是橙色。但是将鼠标悬停在链接上可以保持黑色。
解决方法
在开发人员工具中检查输出时，您会看到选择器specificity被覆盖。
您可以将!important添加到您的值中，以覆盖color: #f4f4f4 !important之类的值，或者提供与引导程序css用来应用它的选择器相同的选择器。像.navbar-light .navbar-nav .nav-link { color: red }
您的自定义css可能会被默认的引导css覆盖，这就是为什么它不起作用的原因
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。