引用Bootstrap后自定义CSS文件不生效，无法修改页面样式是什么原因？

自定义CSS不生效排查步骤 #

• 检查CSS引用标签属性是否正确
  必须保证link标签包含rel="stylesheet"属性，缺失该属性时浏览器会直接忽略该文件的样式加载，正确写法示例：

  <link rel="stylesheet" href="你的自定义样式文件名.css">
  

  同时确认href里的文件名、后缀和你实际的CSS文件完全一致，大小写也要完全匹配，避免拼写错误。
• 排查样式优先级问题
  Bootstrap内置样式的优先级可能高于你写的自定义样式，你可以先给你写的某条测试样式加上!important后缀，刷新页面看是否生效，如果生效就是优先级问题，后续可以通过提高自定义选择器优先级解决（比如给父容器加自定义类名，拼接后代选择器提高权重），不需要长期用!important。
• 清除浏览器缓存测试
  浏览器默认会缓存静态资源，你修改CSS后按Ctrl+F5强制刷新页面，或者打开F12开发者工具，在「网络」面板勾选「禁用缓存」后再刷新，确认是不是旧缓存导致样式没有更新。
• 检查CSS语法错误
  如果CSS文件内存在语法错误（比如缺失大括号、分号、引号不闭合），错误位置之后的所有样式都会失效，可以直接在浏览器F12的「源文件」面板里打开你的CSS文件，看有没有报错提示。
• 确认选择器匹配正确
  检查你写的CSS选择器和HTML元素的类名、ID名是否完全一致，拼写错误会导致选择器匹配不到元素，样式自然不生效。

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