Python 无法组合引导和自定义CSS_Python_Html_Css_Twitter Bootstrap_Flask

Python 无法组合引导和自定义CSS

python html css twitter-bootstrap flask

Python 无法组合引导和自定义CSS,python,html,css,twitter-bootstrap,flask,Python,Html,Css,Twitter Bootstrap,Flask,我用的是烧瓶和引导器。我正在尝试将我自己的自定义CSS与一些引导类结合起来，虽然我可以将引导类很好地应用于元素，但当我尝试应用我自己的自定义CSS时，它并不总是起作用。例如，我将Bootstrap的文本中心应用于一个div，它就工作了。然后，我尝试应用一些自定义CSS，要么什么都没有发生，要么只应用了部分CSS。例如，color:red起作用，但font-size:100px不起作用这简直让我发疯，我什么都试过了。我的CSS在引导CDN之后加载，我在Flask中使用url\u来访问CSS文件。

我用的是烧瓶和引导器。我正在尝试将我自己的自定义CSS与一些引导类结合起来，虽然我可以将引导类很好地应用于元素，但当我尝试应用我自己的自定义CSS时，它并不总是起作用。例如，我将Bootstrap的

文本中心

应用于一个div，它就工作了。然后，我尝试应用一些自定义CSS，要么什么都没有发生，要么只应用了部分CSS。例如，

color:red

起作用，但

font-size:100px

不起作用

这简直让我发疯，我什么都试过了。我的CSS在引导CDN之后加载，我在Flask中使用

url\u来访问CSS文件。我也尝试过使用！重要信息
，但这不起作用。我不知道还能尝试什么
在我的基本模板中导入CSS内容：
<head>
    {% block head %}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
{% endblock %}
</head>

一点自定义CSS
.red {
    color: red;
    font-size: 100px;
}

我建议使用“在浏览器中”来确定将哪些样式应用于图元
根据提供的代码，正确应用了字体大小
规则


瑞德先生{
颜色：红色；
字体大小：100px；
}
此处为文本
更多文本

这里还有更多有用的信息：
我最终通过将浏览器从Chrome切换到Firefox解决了我的问题。我怀疑这是Chrome缓存的问题，但是在重置浏览器并清除缓存后，问题并没有消失
 是否已检查是否有任何内联样式覆盖样式元素？也许试着发布你的代码，我们可以更好地了解发生了什么！你能提供一些特定的代码片段吗？发生这种情况的原因有很多。确保在引导样式表之后导入自定义样式表。确保您尝试更改的属性未设置为！重要信息
默认情况下来自引导。确保您正在更改正确的元素，而不是父/同级元素。等等，@EGC我放了几个片段这里是你的“定制CSS”？单独的文件？内部和
标签？有时您可能需要使用！重要的
关键字位于css属性的末尾，因为引导往往具有优先级。使用它就像边框：1px纯黑！重要的
.red {
    color: red;
    font-size: 100px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
    .red {
      color: red;
      font-size: 100px;
    }
    </style>
  </head>
  <body>
    <div class="header">
      <header class="text-center">
        <div>
          <img src="#" class="img-fluid">
        </div>
        <div>
          <p class="red">Text here.</p>
          <p>More text.</p>
        </div>
        <div class="buttons">
          <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
        </div>
      </header>
    </div>
  </body>
</html>