根本原因是加载顺序错误或选择器权重不足：bootstrap css必须在业务css之前加载，且业务选择器需达0,0,2,0权重（如.btn.my-btn）或通过:root变量覆盖，否则规则不入场。
Bootstrap 的 CSS 优先级压过业务样式，不是因为你写错了，而是浏览器根本没选你的规则——它在加载顺序或选择器权重上就输了。
检查标签顺序是否真的生效
Bootstrap CSS 必须在所有业务 CSS 之前加载，这是硬性前提。但光看 HTML 代码顺序不够，得确认实际网络请求顺序和状态：
- 打开 DevTools → Network 面板，刷新页面，过滤
css，确认bootstrap.min.css（或类似路径）排在custom.css、app.css等业务文件之前，且状态码是200 - Django/Flask 用户要验证
{% static 'css/custom.css' %}对应的 URL 真实可访问；Vite/Webpack 用户不能只信import顺序，最终以 HTML 源码中<link>的物理位置为准 - CDN 场景下，禁用
async或defer，否则加载时序不可控
你的选择器权重根本没资格入场
Bootstrap 大量使用组合类，比如 .btn.btn-primary 特异性是 0,0,2,0；而你写的 .my-btn 只有 0,0,1,0。浏览器直接跳过你的规则，连“覆盖”这一步都不发生。
- 别单独写
.my-btn { background: red; }——它不继承.btn的 padding、border-radius，按钮会变形 - 正确做法是复用结构：
.btn.my-btn（权重升到0,0,2,0），或加父容器限定如.dashboard .btn.my-btn（0,0,3,0） - 避免用
div.my-btn提权到0,0,1,1，语义弱且易被 DOM 变动破坏
你以为在改样式，其实改的是变量或!important陷阱
Bootstrap 5.3+ 把大量样式逻辑下沉到 CSS 自定义属性（如 --bs-btn-bg），你直接写 .btn-primary { background: #xxx; } 可能根本没触达源头。
- 想全局改主色？优先在
:root里重设--bs-primary，而不是硬覆盖选择器 -
!important在以下场景必然失效：style="color: red"（内联权重 1000）、Dark Reader 插件注入的高权样式、Vue/React scoped 样式或 Shadow DOM 隔离环境 - 拼错变量名（比如
--primary而非--bs-primary）或漏分号，整行会被浏览器静默忽略，DevTools 的 Computed 面板里完全看不到
真正难处理的从来不是“怎么让样式生效”，而是生效之后，要不要为每个新组件都补一层选择器——所以优先走 :root 变量或编译时命名空间，比硬提权更可持续。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
