html - 如何覆盖已在其类中具有 !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>

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

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

如何覆盖 Bootstrap CSS 样式？

如何覆盖引导类？

如何覆盖引导程序？

使用自定义 CSS 覆盖 Bootstrap CSS

标签： htmlcsstwitter-bootstrap

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>