css - 覆盖 Bootstrap CSS(链接颜色)
问题描述
我是编码新手,我正在尝试使用 Bootstrap。但是,我不知道如何用我自己的 CSS 覆盖默认的 Bootstrap 代码。
我已经搜索过,常见的建议是: 1. 在 Bootstrap 之后链接我自己的样式表。2. 使我的引用比 Bootstrap 更具体(例如,navbar-link a
而不是 just a
)。3. 将 !important 添加到我的 CSS(应该避免)。
我尝试了所有这些,但仍然很难应用我的 CSS。我究竟做错了什么?有人可以指出我正确的方向吗?
下面是使用导航栏和链接的示例。背景颜色被应用,但a
元素的样式都不起作用。我尝试了各种更具体的等级,但似乎都没有奏效。
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- my css below-->
<link rel="stylesheet" href="CSS/main.css" type="text/css">
<title>ML</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="index.html"><img src="img/logo-small.png" alt="Logo"></a>
<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">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
CSS
body {
background-color: #3c896d;
}
.navbar-light .navbar-nav .nav-link a:visited {
color: #3c896d;
}
.navbar-light .navbar-nav .nav-link a:hover {
color: #db5461;
}
.navbar-light .navbar-nav .nav-item .nav-link a {
color: #db5461;
}
解决方案
你有正确的风格。您没有看到样式被应用的原因是您没有在 CSS 中正确定位选择器。例如,
.navbar-light .navbar-nav .nav-item .nav-link a
应该改为
.navbar-light .navbar-nav .nav-item .nav-link
您不需要在 .nav-link 之后定位“a”标签。当您在 CSS 中的选择器之间添加空格时,例如“.navbar-light .navbar-nav”,这意味着您正在选择所有包含属于父“.navbar-navbar-”类“navbar-nav”的子节点光”。
在您的情况下,您有“.navbar-light .navbar-nav .nav-item .nav-link a”,因此浏览器会查找<a>
“.nav-link”选择器下的所有标签/选择器。在这种情况下,不存在。相反,您有一个<a>
标签,它本身具有类“nav-link”(而不是它的子元素)
这是一篇很棒的文章,可帮助您了解如何正确定位 CSS 选择器,以便应用正确的样式。
https://css-tricks.com/whats-the-difference/
至于你的答案,这就是 CSS 应该改成的
body {
background-color: #3c896d;
}
.navbar-light .navbar-nav a.nav-link {
color: #3c896d;
}
.navbar-light .navbar-nav a.nav-link:hover {
color: #db5461;
}
.navbar-light .navbar-nav .nav-item .nav-link {
color: #db5461;
}
推荐阅读
- python - 带有循环和条件语句的 Python 脚本
- javascript - 套接字客户端未连接
- excel - 不要在空单元格上运行的公式中显示#N/A
- python - 将 3 个数据框列合并为 1 个优先级,同时避免应用
- reactjs - 我想将状态值传递给 compontDidmount
- docker - Docker .NET Core 映像构建适用于一台主机,但不适用于另一台主机
- c# - 更改材质后再次加载原始纹理(.mtl)
- google-sheets - 在兄弟列中找到迄今为止最后一个非空单元格
- python - 将用户输入转换为十六进制,加入 NULL?
- ruby-on-rails - Stimulus JS,单击背景后模态不会关闭