Question

我在我的网站中包含引导链接，如下所示：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">

在下面，我包括自己的CSS样式表，如下所示：

<link href="css/header.css" rel="stylesheet" type="text/css">

但是，由于包含了引导程序，因此我无法再通过header.css中的原始样式表来编辑网站的样式。我仍然可以通过<style="....">编辑网站的外观，但是我想将每种样式都集成到css文件中。有人知道如何解决问题吗？谢谢。

Answer 1

CSS代表Cascading Style Sheets，听起来似乎有些武断，但是了解它完全按照名称说明的功能非常重要。样式在文件中“层叠”。如果将其放在文件的更下方，则可以轻松覆盖所需的任何属性。如果您不希望覆盖它，可以给它更多权重，或者更准确地说，给它更多Specificity。

众所周知，许多引导样式都是特定的，并且需要较重的选择器来覆盖。

因此，首先，请确保在header.css之后加载bootstrap.min.css文件_，并确保使用了足够的特定选择器。

看看以下代码段：如果您希望.alt div为黑色，则即使库使用的是真正特定的选择器，也需要确保使用的是更重的选择器，即使您的选择器随后出现。

/* Library.css */
div {
  background: #0095ee;
  color: #fff;
}

div + div.alt {
  background: #ee3d96;
}

/* Custom.css */
.alt {
  background: #000
}

<div>I'm the first div</div>
<div class="alt">I'm the second div</div>
<div>I'm the third div</div>

包含Bootstrap链接后如何保留原始的CSS文件？

1 个答案: