如何覆盖一个类以不使用 CSS 属性？答案

【问题标题】：How to override a class to not use a CSS property?如何覆盖一个类以不使用 CSS 属性？
【发布时间】：2022-02-22 20:41:06
【问题描述】：

假设我有文件_buttons.scss：

.btn {
  display: inline-block;
  font-family: $btn-font-family;
  font-weight: $btn-font-weight;
  color: $body-color;
  text-align: center;
  text-decoration: if($link-decoration == none, null, none);
  white-space: $btn-white-space;
}

现在在我的覆盖文件“buttons.scss”中，我想删除 color 并添加我的自定义字体系列和粗细：

.btn {
      font-family: $custom-font-family;
      font-weight: $custom-font-weight;
}

现在，如果我想在 <a> 上使用 .btn 类，由于生成的 CSS 文件而不是 <a> 定义的颜色，它仍将采用 Bootstrap 中 .btn 类的颜色。

例如在html中：

<a href="#" class="btn btn-sm dropdown-toggle" data-toggle="dropdown">Attachment <span class="badge" data-bind="text: Documents().length">1</span></a>

我怎样才能防止这种情况发生？

编辑：编译后的 css 将类似于：

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
}

.btn {
  font-family: "Segoe UI", "Segoe UI Light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
}

因此，它仍将使用来自引导程序的 .btn 类的 #212529 颜色。

【问题讨论】：

没有看到html代码很难说，但尝试使用color: inherit; 或color: inherit !important;
@RaymondNijland，我已编辑问题以添加 html 代码示例。
您是在核心文件之后加载覆盖文件吗？这应该可以工作。
@isherwood，是的，它是在原始引导文件之后加载的。我已经编辑了我的问题以添加编译后的 CSS 的样子。

标签： css twitter-bootstrap bootstrap-4 sass

【解决方案1】：

您必须手动将颜色设置为“未设置”

.btn {
  font-family: $custom-font-family;
  font-weight: $custom-font-weight;
  color: unset; /* or "inherit" or whatever, based on your needs */
}

这是覆盖 CSS 属性的正确方法，请注意您可能需要 !important 遵循基于您的 CSS 框架需要的 CSS 规则。换句话说，如果您无法处理加载顺序，则需要指定！important（如果可以，请不要）:)

如果你没有像现在这样指定颜色，你只是覆盖了其他属性并保持颜色

【讨论】：

【解决方案2】：

手动设置颜色“未设置”

.btn {
  font-family: "Segoe UI", "Segoe UI Light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
  color: unset
}

【讨论】：

【解决方案3】：

将!important 添加到您的 CSS 属性应该会有所帮助。

About !import on w3schools.

.btn {
  font-family: $custom-font-family !important;
  font-weight: $custom-font-weight !important;
}

【讨论】：

这不是必须的。加载顺序应该足够了，!important 使进一步的定制变得更加困难。请注意，您拼错了第一个实例。