一些但不是全部自定义CSS会覆盖Bootstrap 4设置

2024-04-29 • 问答

请原谅我的无知，但我完全是菜鸟，不知道自己在做什么！

我使用Bootstrap 4整理了一个基本网页（http://dcbproductions.co.uk/），并希望修改一些颜色和设计以适合我的品牌。在大多数情况下，这是可行的，但是我在为按钮而苦苦挣扎。我设法在默认状态和悬停状态下更改了按钮上文本的颜色。但是，我也试图在两种状态下更改背景色，但是没有任何反应。这是我正在使用的代码：

.btn-light {
  background-color: #fcf8d7 !important;
  background-image: none !important;
  text-shadow: none;
  color: #714c82;
}

.btn-light:hover{
  background-color: #714c82;
  background-image: none;);
  color: #939393;
  text-shadow: none;
}

在页面的html文件中，我得到了：

<a href="mailto:..." <button type="button" class="btn btn-light btn-lg"><i class="far fa-envelope"></i> Email Us</button></a>

此外，由于某些原因，当我在线上CSS文件时，此代码甚至都不会更改文本颜色。仅当我将其添加到html的标记中时，它才起作用，即使在脱机站点上工作时，在CSS中也可以正常工作。

我希望这一切都有道理。

有人知道导致我麻烦的原因吗？

请勿使用以上注释中提到的！important。您需要研究CSS的特异性。

每个选择器在特异性层次结构中都有其位置。有四个类别定义了选择器的特异性级别：

内联样式-内联样式直接附加到元素被样式化。示例：。
ID-ID是页面元素的唯一标识符，例如 #navbar。
类，属性和伪类-此类别包括 .classes，[attributes]和伪类，例如：hover，：focus等。
元素和伪元素-此类别包括元素名称以及伪元素，例如h1，div，：before和：after。

要覆盖样式，您需要使CSS更具体。您可以通过多种方式执行此操作，但最简单的方法可能只是将元素类型添加到样式之前。例如，您的样式应为：

button.btn-light {
  background-color: #fcf8d7;
  background-image: none;
  text-shadow: none;
  color: #714c82;
}

button.btn-light:hover{
  background-color: #714c82;
  background-image: none;
  color: #939393;
  text-shadow: none;
}

您应该删除important，因为它不是必需的，而且代码中也存在语法错误，例如background-image: none;);

.btn-light {
    background-color: #fcf8d7;
    background-image: none;
    text-shadow: none;
    color: #714c82;
}
.btn-light:hover {
    background-color: #714c82;
    background-image: none;
    color: #939393;
    text-shadow: none;
}

将鼠标悬停在此按钮上将显示外观

下面一行也有语法错误

<a href="mailto:..." <button type="button" class="btn btn-light btn-lg"><i class="far fa-envelope"></i> Email Us</button></a>

应该是

<a href="mailto:dave@dcbproductions.co.uk" class="btn btn-light btn-lg"><i class="far fa-envelope"></i> Email Us</a>

一些但不是全部自定义CSS会覆盖Bootstrap 4设置

jinguobin 回答：一些但不是全部自定义CSS会覆盖Bootstrap 4设置

大家都在问