Bootstrap 3自定义CSS需加html前缀才生效，求解决方案

核心原因 #

这是CSS优先级导致的——你的自定义样式选择器优先级低于Bootstrap内置样式的选择器，所以被覆盖了。添加html前缀相当于提升了选择器的权重，让自定义样式优先级超过Bootstrap的规则，因此生效。

具体解决办法 #

• 调整CSS引入顺序：确保你的custom.css在Bootstrap的CSS文件之后引入。比如HTML里的顺序应该是：

  <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="custom.css">
  

  同一优先级的样式，后加载的会覆盖先加载的，这是最基础的解决方式。
• 提高选择器优先级：如果调整顺序没用，说明Bootstrap的选择器权重更高，可以用更具体的选择器，比如：
  • 原自定义样式：.btn { background: red; }
  • 改成更具体的：.container .btn { background: red; }（根据你的DOM结构调整）
  • 或者使用!important（不推荐滥用，但紧急情况下可用）：.btn { background: red !important; }
• 检查样式冲突：打开浏览器开发者工具（F12），选中元素查看「Styles」面板，看看你的自定义样式是不是被划掉了，旁边会显示覆盖它的Bootstrap样式规则，针对性调整自己的选择器。

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