html - 如何覆盖其类中已有 !important 的 Bootstrap 类

Question

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

出于某种原因我不想更改类名

.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;
}

但只适用 Bootstrap 样式

现在我该如何覆盖？

.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>

我的自定义样式和 bootstrap 已有的类

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

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

您需要在 Bootstrap 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>