自定义按钮颜色未在浏览器中显示

Question

我目前正在制作一个小网页，使用 HTML、CSS 和 Bootstrap 列出我最喜欢的塞尔达老板 5. 我不想使用标准 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/bootstrap@5.0.2/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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

Answer 1

将样式标记为重要以覆盖 Bootstrap 样式。

/* Modal Stuff */
.mod-button {
  background-color: #6c25be !important;
}

工作fiddle：https://jsfiddle.net/xvbctL54/

Answer 2

如上所述，您可以为您的 class 添加重要性，您还应该能够将更具体的 class 设置为 css 优先级特异性。所以class喜欢

.card-title .mod-button {
     background-color: #6c25be;
}

可能会让您更接近于覆盖 bootstrap。

这基本上是可行的，因为每个选择器都有自己的数值 'weight':

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 中的字符串添加更多 class 时，您为每个调用添加 10 点。

小心使用 ID，因为它们“应该”仅用于页面上的单个对象

Answer 3

将mod-button替换为：

.btn-custom {
    color:white;
    background-color: #6c25be;
    border-color: #6c25be;
}
    
.btn-custom:hover {
    color:#6c25be;
    background-color: white;
}

自定义按钮颜色未在浏览器中显示

Custom button color not displaying in browser

html

css

bootstrap-5