项目中无法协同使用CSS文件与Bootstrap主题，s1.css修改不生效求助

检查CSS文件引入顺序 #

Bootstrap的CSS必须先于你的自定义s1.css引入。如果自定义样式放在Bootstrap前面，会被Bootstrap的样式优先级覆盖。正确的引入顺序示例：

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

提升选择器优先级 #

若你的选择器权重和Bootstrap的相同，后续样式才会生效。如果Bootstrap的选择器权重更高（比如带元素+类名组合，或使用了!important），可以通过以下方式调整：

• 给选择器增加层级，比如Bootstrap用了.container，你可以写body .container
• 给目标元素添加专属自定义类，比如.custom-container，用这个类来写样式
• 必要时临时使用!important（尽量少用，避免后续样式混乱）：

.custom-text {
  color: #ff0000 !important;
}

验证CSS文件路径 #

确认s1.css的引入路径是否正确：

• 和HTML同目录直接写href="s1.css"
• 在子目录里要写相对路径，比如css/s1.css
• 打开浏览器开发者工具（F12）的「网络」标签，查看s1.css是否成功加载（有没有404错误）

清除浏览器缓存 #

浏览器可能缓存了旧的CSS文件，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，加载最新样式。

用开发者工具排查 #

打开浏览器开发者工具（F12），选中目标元素查看「样式」标签：

• 若自定义样式被划掉，说明被更高优先级的样式覆盖
• 若自定义样式完全没出现，说明CSS文件没加载或选择器书写错误

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