gpt4 book ai didi

css - 覆盖 Bootstrap CSS(链接颜色)

转载 作者:行者123 更新时间:2023-11-27 23:17:46 24 4
gpt4 key购买 nike

我是编码新手,正在尝试使用 Bootstrap。但是,我找不到如何用我自己的 CSS 覆盖默认的 Bootstrap 代码。

我搜索过,常见的建议是:1. 在 Bootstrap 之后链接我自己的样式表。2. 使我的引用比 Bootstrap 更具体(例如 navbar-link a 而不仅仅是 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-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;
}

关于css - 覆盖 Bootstrap CSS(链接颜色),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58176834/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com