CodePen中自定义CSS无法覆盖Bootstrap类的问题咨询

核心原因：样式加载顺序不符预期 #

CodePen的样式加载机制和本地静态页面存在差异：

• 若你在CodePen的Settings > CSS面板中已添加Bootstrap作为外部资源，同时又在HTML编辑器里手动引入了bootstrap.min.css，会导致Bootstrap被加载两次，且第二次加载的Bootstrap样式会覆盖后续引入的自定义CSS。
• 即便你手动在HTML里按顺序引入了Bootstrap和自定义CSS，CodePen会把你在CSS编辑器中编写的代码生成一个<style>标签插入到<head>末尾——但如果自定义CSS是外部引入的custom.css，它的加载顺序可能早于CodePen通过Settings添加的Bootstrap资源，导致样式被覆盖。

解决办法 #

• 统一样式引入方式：要么在CodePen的Settings > CSS中添加Bootstrap外部资源，把自定义样式直接写在CodePen的CSS编辑器里（CodePen会确保自定义CSS在Bootstrap之后加载）；要么完全手动在HTML的<head>里按顺序引入Bootstrap和自定义CSS，同时清空CSS编辑器内容，避免重复加载。
• 检查实际加载顺序：右键查看CodePen页面源代码，确认<head>中Bootstrap的样式文件/标签在自定义样式之前，保证加载顺序符合“后加载覆盖先加载”的规则。
• 避免重复引入：不要同时通过Settings和HTML手动引入Bootstrap，防止样式加载顺序混乱。

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