Flask引入Bootstrap后自定义CSS不生效的问题如何解决？

问题成因 #

• 核心原因是样式表加载顺序错误：CSS遵循后加载优先级更高的覆盖规则，你将自定义main.css放在Bootstrap样式表之前加载，当两者存在同优先级的同名样式规则时，Bootstrap的规则会覆盖你的自定义样式。
• 其他可能成因：
  1. 自定义样式的选择器优先级低于Bootstrap对应元素的选择器优先级，即使顺序正确也会被覆盖
  2. 你提到使用Bootstrap 5，但代码中实际引入的是Bootstrap 3.3.7版本，版本差异可能导致预期外的样式覆盖
  3. 浏览器静态资源缓存，导致修改后的样式未生效

修复方案 #

1. 调整样式表加载顺序，将自定义CSS放在所有第三方样式表之后加载，修改后index.html的head部分代码如下：

<head>
    <title>Home</title>
    <!-- 先加载Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 后加载自定义CSS -->
    <link rel="stylesheet" href="{{url_for('static', filename='main.css')}}">
</head>

2. 提升自定义样式优先级：如果调整顺序后仍有规则被覆盖，可以使用更具体的选择器，比如给目标元素加专属自定义类，或者在选择器前增加父级选择器拉高优先级，非必要不建议滥用!important。
3. 对齐Bootstrap版本：如果确实需要使用Bootstrap 5，将CDN链接替换为Bootstrap 5对应版本的资源，或者确保你放入static文件夹的Bootstrap 5样式表的加载顺序在自定义CSS之前。
4. 避免缓存干扰：修改样式后可以按Ctrl+Shift+R强制刷新浏览器清理缓存，也可以给静态资源链接加版本后缀，比如{{url_for('static', filename='main.css?v=20240520')}}，每次修改样式后更新版本号即可强制拉取新资源。

内容的提问来源于stack exchange，提问作者Davide Antipa