我目前正在使用 HTML、CSS 和 Bootstrap 5 制作一个小网页，列出我最喜欢的 Zelda bosses。我不想对按钮使用标准 Bootstrap 颜色，所以我尝试制作自己的按钮，但是自定义颜色不会显示在网页中，但会显示在 Codepen 中。下面您将找到我迄今为止编写的 HTML 和 CSS 代码。我是否做了一些我没有看到的事情？
.header-custom {
background-color: #bea925;
}
.header-heading-text {
font-weight: bold;
}
.main-container-color {
background-color: #2596be;
}
/* Modal Stuff */
.mod-button {
background-color: #6c25be;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zelda Mini-wiki</title>
<meta name="description" content="This mini guide will cover all of the important facts and aspects of The Legend of Zelda franchise. Not as big as the full wiki, but still powerful enough to get the job done.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7e7373686f686e7d6c5c29322c322e" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="p-5 header-custom text-white text-center">
<h1 class="header-heading-text"> Top 10 Zelda Bosses (In my opinion)</h1>
<p>Please don't come after me!</p>
</div>
<!--Main container-->
<div class="p-5 container-fluid main-container-color">
<div class="row text-center">
<div class="col-lg-4 col-md-6">
<div class="card" style="width:400px">
<img class="card-img-top" src="images/koloktos_image.webp" alt="" style="width:100%">
<div class="card-body">
<h4 class="card-title">Koloktos</h4>
<button type="button" class="btn mod-button" data-bs-toggle="modal" data-bs-target="myModal">
More Info
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Must stay at the end of the body tag -->
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4918a948a96" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>最佳答案
如上所述，您可以为您的类添加重要性，您还应该能够创建一个更具体的类，因为 css 优先考虑特异性。所以像这样的类
.card-title .mod-button {
background-color: #6c25be;
}
可能会让您更接近覆盖 Bootstrap 。
这基本上是有效的，因为每个选择器都有自己的数字“权重”:
100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: If the element has inline styling that automatically wins (1000 points)
在两种选择器样式中，浏览器将始终选择权重较大的一种。仅当优先级相同时，样式表的顺序才重要 - 这就是为什么覆盖 Bootstrap 并不容易。
因此，当您向 css 中的字符串添加更多类时，您为每个调用的类添加 10 点。
请小心使用 ID，因为它们“应该”仅适用于页面上的单个对象
关于html - 自定义按钮颜色未在浏览器中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72450569/