link顺序决定样式胜负，后加载的css会覆盖同权重的先加载样式，因此自定义css应置于框架css之后；若仍被覆盖，需检查并提升选择器权重，而非滥用!important。
为什么 link 顺序决定样式胜负
浏览器按 <link> 在 HTML 中的出现顺序，从上到下加载 CSS 文件。后加载的样式规则，会覆盖前面同名、同权重的选择器。这不是“谁更强”，而是“谁最后写”。所以把自定义 CSS 放在框架 CSS 后面 是最基础、最可靠的优先级控制手段。
- Bootstrap 的
bootstrap.min.css必须在前，你的custom.css必须在后 - 如果用了多个框架（如 Bootstrap + Font Awesome），也要按依赖关系排：基础框架 → 组件库 → 自定义
- 注意构建工具（Vite/Webpack）可能自动重排
<link>，要检查最终 HTML 源码是否符合预期
link 顺序正确但还是被覆盖？检查选择器权重
即使 custom.css 在最后，如果框架用了更具体的选择器（比如 .btn.btn-primary），而你只写了 .btn，那依然会被压住。这时候不能靠堆 !important，得提升自己选择器的“分量”。
- 用浏览器开发者工具（Elements → Styles 面板）点开被覆盖的属性，看哪条规则划掉了，点它就能看到来源和具体选择器
- 复制框架里生效的选择器，再在其基础上加一层上下文（比如
body .my-btn或.app-wrapper .btn） - 避免无差别用
!important—— 它会破坏可维护性，且一旦框架升级改了内部结构，你的!important可能突然失效
Vue/React 项目里 link 顺序容易被搞乱
单页应用常通过 JS 动态注入样式（比如 Vue 的 <style scoped></style>、CSS-in-JS 库），或由构建工具自动注入 <link>，导致你写的 <link rel="stylesheet"> 实际加载顺序不可控。
- 在 Vue CLI 或 Vite 中，把自定义全局 CSS 写进
src/assets/main.css，并在main.js最早 import：import './assets/main.css'
（确保它在import 'bootstrap'之后） - React 中，用
import 'bootstrap/dist/css/bootstrap.min.css';然后再import './custom.css';，顺序由 import 语句决定 - 如果用了 CSS Modules 或 styled-components，它们默认带作用域隔离，不参与全局层叠，此时冲突反而变少——但要注意：全局类名（如
.alert）仍可能被意外命中
真正难处理的是内联 style 和 JS 动态 class
style="color: red" 这种内联样式权重高于所有外部 CSS；JS 通过 element.classList.add('is-active') 添加的 class，也可能触发框架的高权重规则。这时光调 <link> 顺序没用。
立即学习“前端免费学习笔记（深入）”；
- 内联样式必须用 JS 覆盖（
el.style.color = ''或el.removeAttribute('style')），或者用更高权重的 CSS 强制接管（例如[style] .target { color: blue !important }，慎用） - 对 JS 添加的 class，可在自定义 CSS 中直接针对它写规则，比如框架加了
.bs-modal-open到，你就写body.bs-modal-open { overflow: hidden !important; } - 关键原则：先定位是哪一层（HTML 属性 / JS 注入 / 外链 CSS）在起效，再选对应层级的干预方式
