作为新手，我正在使用 bootstrap 5 制作一个简单的网站。在制作导航栏并亲自定制它时，我注意到其中一个 CSS 属性根本不适用。具体来说，尽管不断变化和修复，我徽标上的字体大小并没有改变。
我觉得这绝对是一个简单的解决方案，但我就是不明白。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="styling.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<h1 class="navbar-brand" href="#">HELP ME OUT</h1>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 m-auto">
<li class="nav-item">
<a class="nav-link active navtag" aria-current="page" href="dashmain.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Guide</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#">Dropdown</a>
</li>
<li class="nav-item">
<a class="nav-link">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>
CSS：
* {
margin: 0;
padding: 0;
background-color: #408EC6;
}
.navbar-brand{
font-size: 2.5rem;
padding: 5px;
border-bottom: 4px solid black;
border-left: 4px solid black;
user-select: none;
}
.navbar-brand:hover {
animation: color-change 3s infinite;
}
@keyframes color-change {
0% {
color: #1E2761;
}
15% {
color: #7A2048;
}
25% {
color: wheat;
}
50% {
color: #1E2761;
}
75% {
color: #7A2048;
}
80% {
color: wheat;
}
100% {
color: #1E2761;
}
}
我已经做了一些修改，比如使用正确的指标，甚至更改 html 标签。在我记得之前它就开始工作了。然而，在我完成对文本应用悬停动画后，它并没有更改为我喜欢的大小。
您的style.css文件位于bootstrap css文件之上，这会导致您的样式被bootstrap覆盖。将其放在 bootstrap css 文件下方，以便应用您的样式。