我目前正在尝试使用html和css制作电子商务网站，从bootstrap中获得了一个导航栏模板。当我想设计.navbar light.navbar nav.nav链接类的样式时，我的问题就来了，我不知道我做错了什么，我目前正在学习，所以我还没有进行过实验，这也是我第一次使用引导
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family:'Poppins', sans-serif;
}
h1{
font-size: 2.5rem;
font-weight: 700;
}
h2{
font-size:1.8rem;
font-weight:600;
}
h3{
font-size: 1.4rem;
font-weight:800;
}
h4{
font-size:1.1rem;
font-weight:600;
}
h5{
font-size:1rem;
font-weight:400;
color:#1d1d1d;
}
h6{
color:#d8d8d8;
}
.cash{
color:rgb(231, 215, 66);
font-family: 'Amita';
font-size:50px;
font-weight: 900;
}
.aside{
color:rgb(255, 179, 0);
font-family: 'Playfair Display';
font-size:50px;
font-weight: 900;
font-style:italic;
}
.logo{
width:3.5%;
display:flex;
}
.navbar{
font-size: 16 px;
}
.navbar-light .navbar-nav .nav-link{
padding: 0 20px;
color: black;
transition:0.3s ease;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar i:hover,
.navbar-light .navbar-nav .nav-link.active{
color:coral;
}
.navbar i{
font-size:1.2rem;
padding:0 7px;
cursor:pointer;
font-weight:500;
transition:0.3s ease;
}
</pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amita:wght@700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<title>CashCavaleria</title>
</head>
<body>
<!--Navigation-->
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<img class="logo" src="img/logo.png" alt="">
<a class="navbar-brand" href="#"><span class="cash">Cash</span><span class="aside">Cavaleria.</span></a>
<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 ml-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Acasă</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Magazin</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Despre Cashcavaleria</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
<li class="nav-item">
<i class="fal fa-search"></i>
<i class="fal fa-shopping-bag"></i>
</li>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap是一个CSS框架，具有开箱即用的出色风格。它是线框过程中的一个多功能工具，因为你只需在这里和那里添加一个类，你就可以做好准备了。然而，缺点是，附加到这些类的大多数样式都是以特定的方式编写的，浏览器自然会喜欢Bootstrap样式而不是自定义样式。
你看，浏览器会喜欢更具体的"元素定位"，而不是更通用的定位。例如：
html body #wrapper ul li比ul li更具体，因此浏览器将用前者覆盖后者。
在Bootstrap的情况下，这给你留下了几个选择：
选项1
更具体一点，即在造型中使用html body前缀，并确保您的元素更有针对性。
选项2
使用!important作为CSS属性的后缀。这将向浏览器传达您的样式必须优先于应用于该元素的任何其他样式。然而，如果两个CSS目标语句接收到!important标签，浏览器仍然会喜欢更具体的：
html body ul li{ display: none !important; }
body ul li{ display: block !important; }
<!-- result: <li> will be hidden. -->
此外，使用它通常被认为是不好的做法！重要的是，所以总是把这作为最后的手段。
选项3
考虑可以应用于元素的新类。如果您的目标是一个没有在其他地方声明样式的特定"唯一"类，浏览器将更有可能支持这种样式——即名为.flaviusPopaStyling的类肯定不会被Bootstrap使用，因此可以认为是足够唯一的。
.navbar-light .navbar-nav .nav-link.flaviusPopaStyling{
padding: 0 20px;
color: black;
transition:0.3s ease;
}
.navbar-light .navbar-nav .nav-link.flaviusPopaStyling:hover,
.navbar i:hover,
.navbar-light .navbar-nav .nav-link.flaviusPopaStyling.active{
color:coral;
}
确保也将类添加到HTML中，例如：
<a class="nav-link active flaviusPopaStyling" aria-current="page" href="#">Acasă</a>
奖金选项
我个人更喜欢使用名为contains的非保留属性名称，而不是使用Classes。
<nav contains='customNavBar' class="navbar navbar-light . . .">
因为，通过这样做，我既为HTML添加了更多的语义，也为CSS目标使用了明显唯一的标识符，还为JavaScript处理HTML做好了准备，使其永远不会影响其样式，例如toggleClass等。你已经写过你对造型很陌生，所以我可以冒昧地假设你对前端游戏有点陌生，所以可能有点不清楚你为什么要这样做。但这是一个稍后的话题。
希望这能有所帮助！
您需要学习Css selectors Weight：Css特异性
在您的示例中，有一些selectors的权重更大，并且超过了您的custom-css代码。例如，如果您添加：
nav .container-fluid .navbar-nav .nav-link.active{
color:red ;
}
则您高估了当前的CCD_ 12。
首先，您忘记关闭<ul>标记。
其次，您对bootstrap.min.css使用的是v4.1.3，而对bootstrap.min.js使用的是v5.0.2。您应该对所有引导文件使用相同的版本。
最后，您的styles.css应该在bootstrap.min.css:之后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amita:wght@700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- put this last so it can overwrite bootstrap styles -->
<link rel="stylesheet" href="styles.css" />
<title>CashCavaleria</title>
</head>
<body>
...
</body>
</html>