CSS 未显示所有规则答案

【问题标题】：CSS not showing all rulesCSS 未显示所有规则
【发布时间】：2017-05-28 11:20:02
【问题描述】：

我正在使用 Bootstrap jumbotron 作为我的网页的标题，并且我有自己的 layout.css，但并不是所有的 .jumbotron 规则都有效。当我尝试设置margin-bottom: 0px; 时，它并没有出现在我的浏览器开发者工具中，甚至没有被划掉。有谁知道如何解决这个问题？

index.html - 带有 jumbotron 类的头部和头部：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/layout.css') }}" rel="stylesheet">
</head>

<header class="jumbotron container-fluid">
    <h1> Catalog App </h1>
    <button type="button" class="btn btn-xs btn-default btn-login" onclick="location.href='/login/'">Login</button>
</header>

layout.css - .jumbotron：

.jumbotron {
    background-color: #195e8c;
    margin-bottom: 0px;
    padding-top: 2px;
    padding-bottom: 2px;
}

开发者工具 - 不显示底部边距：

我确保所有内容都已保存并重新加载服务器。如果这很重要，它可以在一个简单的 Flask python 服务器上运行。

【问题讨论】：

尝试把你的 CSS 文件放在 bootstrap css 之后
你能为我们复制它吗？
@BigMonkey89WithaLeg 它们已经在引导 CSS 之后链接了
@MichaelCoker 不知道如何重现它，我所做的只是制作一个基本的 Flask 服务器，如果这有助于提供更多信息，我会附上我的头部和相关代码以及我的开发人员工具的图片
您可以导航到css/layout.css 并查看那里列出的margin-bottom？您是否检查过该文件中是否有任何（可能隐藏的）特殊字符？

标签： html css bootstrap-4

【解决方案1】：

尝试将!important 添加到您的边距属性

.jumbotron {
  background-color: #195e8c;
  margin-bottom: 0px !important;
  padding-top: 2px;
  padding-bottom: 2px;
}

【讨论】：

我在另一个类似的帖子中看到了这个解决方案，但他们警告不要使用它，并说除非父母使用它（我检查了 bootstrap.css 并且它不使用！important），否则永远不要使用它，什么是使用 !important 的潜在问题？编辑：对此进行了测试，margin-bottom 规则仍未显示
许多引导 css 默认属性需要 !important 被覆盖。我认为没有任何相关问题，如果您需要再次覆盖它，只需使用!important即可。
我对此进行了测试，但它仍然没有显示在浏览器或开发者工具中
也试过了，没有运气。我还检查以确保标题中的所有元素在标题之外都没有边距。
看来解决办法是把bootstrap.css中的默认属性去掉stackoverflow.com/questions/24337758/…

【解决方案2】：

Flask 没有重新加载 CSS 文件，因为在我的 server.py 文件中 layout.css 是静态的，它在首次设置应用程序时设置一次。我再次设置 FLASK_APP 并重新加载服务器并解决了问题。

要让烧瓶服务器刷新包括 css 关闭浏览器缓存并打开烧瓶调试export FLASK_DEBUG=1

【讨论】：