如何覆盖已在其类中具有 !important 的引导类

Question

我正在尝试用我自己的影子类覆盖引导程序 shadow-sm 类。这是引导类。

出于某种原因我不想更改班级名称

.shadow-sm {
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

我试图用我的自定义样式覆盖

.shadow-sm {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12)!important;
}

但只有引导样式适用

现在我该如何覆盖？

.shadow-sm {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)!important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row m-2">
    <div class="col-lg-6 col-6 p-1">
      <a class="btn fb btn-block shadow-sm rounded-pill" href="#" role="button"><strong>Facebook</strong></a>
    </div>
  </div>
</div>

我的自定义样式与引导程序已有的类

尝试了以下问题，但没有任何效果

How can I override Bootstrap CSS styles?

How can I override bootstrap classes?

How to override bootstrap?

Override Bootstrap CSS with custom CSS

Answer 1

您需要将链接添加到您的 css 文件在引导 css 文件之后。无需使用!important 这样做。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/styles.css" rel="stylesheet" />
<div class="container">
  <div class="row m-2">
    <div class="col-lg-6 col-6 p-1">
      <a class="btn fb btn-block shadow-sm rounded-pill" href="#" role="button"><strong>Facebook</strong></a>
    </div>
  </div>
</div>

Answer 2

为您的元素添加一个类或 id 并在那里分配您的属性，例如

如果类 .imp 具有 !important 属性

<div class="main">
<div class="imp newclass">
</div>
</div>

你将不得不像这样访问元素；

.main .newclass{}

或

div.newclass{
}

Answer 3

这与 CSS 特定性有关（基本上是优先顺序）。你可以在这里了解更多：https://www.w3schools.com/css/css_specificity.asp

在你的情况下：

您可以通过添加您选择的其他类来超级覆盖 CSS 属性。

让我们添加shadow-custom 类和shadow-sm 类。

然后使用两者来覆盖默认行为：

.shadow-sm.shadow-custom{
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)!important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row m-2">
    <div class="col-lg-6 col-6 p-1">
      <a class="btn fb btn-block shadow-sm shadow-custom rounded-pill" href="#" role="button"><strong>Facebook</strong></a>
    </div>
  </div>
</div>