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{}

OR

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>

如何覆盖在其类中已经具有！important的引导程序类

尝试以下问题，但无济于事

3 个答案: