javascript - header effect h3标签中bootstrap和CSS库的顺序

Question

当我更改影响 HTML 文档中使用的 h3 的 Bootstrap (在线)和 CSS 库(离线内部)的顺序时。让我更多地解释一下冲突。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
    <link rel="stylesheet" href="http://beautifycodes.com/assets/css/main.css" />

以下文件的顺序是HTML文档的结果:

现在让我们更改 main.css 文件的顺序，h3 标签和 Logo (也有 h1 标签)将更改其颜色、字体、大小和布局。

    <link rel="stylesheet" href="http://beautifycodes.com/assets/css/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>

现在看看下面的截图:

现在我主要关心的是只知道 bootstrap.js 中哪里存在问题？ bootsrap.css ？或者浏览有bug。

谁能帮忙理解背后的原因？

Answer 1

看来您对 CSS 的工作原理知之甚少。CSS 由浏览器从上到下读取，因此顺序很重要。默认 Bootstrap 文件已经包含 H3 标签的样式。您还可以在 main.css 中为 H3 标签定义自定义样式。因此，如果您将 bootstrap css 文件放在 main.css 文件之后，最终浏览器将首先为 H3 标签应用您的 main.css 样式，并在一瞬间内再次应用 bootstrap css 样式。因此，您最终会在 H3 标签上看到 Bootstrap 样式。反之亦然。这是预期的行为以及 CSS 的工作方式。

此外，浏览器在 css 渲染方面不会出错。 😉