根本原因是CSS权重不足和加载顺序失效：Bootstrap的高权重选择器（如.btn.btn-primary）优先于自定义单类规则，且构建工具可能打乱CSS加载顺序；需检查Computed面板、确保link顺序、用组合选择器提权并避免滥用!important。
为什么自定义CSS写对了却没生效
根本原因不是代码写错了，而是浏览器压根没选你的规则——它被 Bootstrap 的同名类“挡”在了外面。比如你写了 .btn { background: red }，但 Bootstrap 的 .btn.btn-primary（权重 0,0,2,0）或 button.btn（0,0,2,1）已经先占了位置，而你的规则只有 0,0,1,0，权重不够，后加载也白搭。
常见现象包括：按钮颜色/圆角/尺寸不变、.container 宽度被重置、.form-control 边框异常加粗。打开开发者工具的 Computed 面板，看目标属性是否被划掉；再点进 Styles 面板，确认生效来源是不是 bootstrap.css。
- 别只盯着“有没有加 class”，要查“哪条声明最终胜出”
- Bootstrap v5+ 大量使用
[data-bs-*]属性选择器和复合类，权重天然比单类高 - 用
!important确实能赢，但下次升级 Bootstrap 后，你得挨个翻文档找它新加的!important规则来对冲
确保自定义 CSS 在 Bootstrap 之后加载才真正有效
加载顺序是优先级控制的第一道防线，但它在现代构建工具里极易失效。你以为 import './custom.css' 写在 import 'bootstrap/dist/css/bootstrap.min.css' 后面就稳了？不一定。
Vite 或 Webpack 可能把所有 CSS 打包成一个 index.css，并按模块依赖图重排顺序；React 的 index.js 中 import 顺序也不等于最终 <link> 顺序。必须检查浏览器里最终渲染的 HTML 源码，确认 <link rel="stylesheet"> 标签中，你的 CSS 确实在 Bootstrap 之后。
立即学习“前端免费学习笔记（深入）”；
- Vue 单文件组件里的
<style scoped>不参与全局层叠，别指望它覆盖.btn - CDN 场景下，把自定义 CSS 的
<link>放在 Bootstrap<link>下方，且不要加async或defer - 用 Vite 时，检查
vite.config.ts是否启用了css.preprocessorOptions导致样式注入时机错乱
用组合选择器提升权重，而不是堆砌 ID 或 !important
直接写 #app .btn 或 body .my-section .btn-primary 是最可控的提权方式。它不破坏可维护性，还能自然限定作用域——你改的只是这个区域里的按钮，不影响导航栏或弹窗里的同名类。
比起盲目加 !important，更推荐用语义化前缀 + 上下文限定。例如 Bootstrap 的 .btn-sm 和 Tailwind 的 text-sm 冲突时，你定义 .ui-btn--small 并配合 .ui-btn--small:not(.btn-sm)，既避开命名污染，又明确表达意图。
- 慎用
:where(.btn)做重置——它权重为 0，适合基础清零，但不能用于覆盖 - 给关键容器加
data-ui="form"，然后写form[data-ui="form"] .btn，权重稳定且易检索 - 避免
div div div .btn这类无意义嵌套，权重虽高，但重构时一改全崩
内联样式和 JS 动态类带来的隐性冲突
哪怕你的 CSS 加载顺序和权重都完美，也可能被运行时行为绕过。比如 Bootstrap 的模态框 JS 会在 body 上加 modal-open 类，但你的 body { overflow: hidden } 如果没带这个 class 限定，就会和它的 body.modal-open { overflow: hidden } 形成竞争——谁后解析谁赢，不可控。
另一个典型是 React 组件里用 el.classList.add('is-active')，结果触发了 Bootstrap 的 .is-active 规则（它可能设了 display: none），而你的自定义 .my-tab.is-active 因为没匹配到元素，根本没机会执行。
- 内联样式
style="color: blue"权重高于所有外部 CSS，JS 修改时要用el.style.color = ''清空，不能只靠 CSS 覆盖 - 遇到
.btn:hover:focus这类链式伪类，你的.my-btn:hover必须写成.my-btn:hover:focus才能对齐权重 - 框架 JS 添加的类（如
.show,.active）最好在自定义样式里显式声明，别依赖继承
真正麻烦的从来不是“怎么覆盖”，而是“什么时候该让框架自己管，什么时候必须插手”。比如 .container 宽度、body 字体这些基础重置，建议直接改 Bootstrap 的 SCSS 变量；而按钮状态、表单校验图标这类业务强相关样式，才值得用组合选择器精细控制。漏掉这点，再多的 !important 也只是补丁堆叠。
