先看DevTools的Computed面板确认样式是否真被覆盖：若规则未出现，说明未加载；若被划掉，再查Styles面板的specificity值和Network中文件顺序与状态。
直接看 DevTools 的 Computed 面板，别猜加载顺序或选择器写法——那里显示的才是浏览器最终采纳的样式来源和真实生效逻辑。
先确认是不是真被覆盖了
选中一个带 Bootstrap 类的元素（比如 <button class="btn btn-primary"></button>），打开开发者工具右侧的 Computed 面板，点开你想查的属性（如 background-color）。如果值来自 bootstrap.min.css，而你写的规则根本没出现在列表里，说明它压根没加载成功；如果出现了但被划掉，才进入“被覆盖”范畴。
- Network 面板里搜
bootstrap.min.css和你的custom.css，确认两者都返回 200，且顺序是你期望的（Bootstrap 在前） - 右键“查看页面源代码”，搜索
<link>，肉眼核对 HTML 中的物理顺序——构建工具（Vite/Webpack）里的 <code>import不等于最终顺序 - 检查
rel="stylesheet"拼写是否正确：少一个t或多一个y，浏览器会静默忽略，Network 面板里根本看不到请求
看 Styles 面板里谁赢了权重战
Styles 面板里被划掉的规则，就是输家。重点不是“有没有写”，而是“有没有参与竞争”。点击划掉样式旁的文件名（比如 custom.css:23），跳转到对应行，再看它的 specificity 值（如 0,2,0）。
- Bootstrap 大量用
.btn.btn-primary这类双类选择器（权重0,2,0），你只写.my-btn（0,1,0）天然输一截 - 如果 Bootstrap 规则来自
:root变量（如--bs-btn-bg），你改.btn-primary { background: red }可能完全无效——变量值在计算时覆盖了你写的声明 - JS 动态挂载的组件（如
Modal、Tooltip）默认插到document.body，你写在#app .btn里的样式根本匹配不到
警惕那些“看不见”的覆盖机制
有些覆盖不体现在选择器权重上，而是绕过层叠规则直接生效。
-
:where()降权：Bootstrap 5.3+ 在部分基础样式里用了:where(.btn)，权重恒为0,0,0，你写.btn（0,1,0）反而更高——但这意味着你得主动用:where()对齐，否则行为不可控 - CSS-in-JS 或
<style></style>标签默认注入末尾，天然晚于 HTML 里的<link>，但可能被 HMR 或构建时机打乱 - CDN 链接里混入 Markdown 格式（如
[bootstrap.min.css](https://...)），浏览器会向本地发起非法请求，Network 显示 404 却不报错
真正容易被忽略的是：即使 custom.css 在 HTML 里排在 Bootstrap 后面，只要它内部某条规则的选择器权重不够，或者目标元素实际由 JS 动态生成并脱离原始 DOM 结构，样式就依然不会生效——这时调顺序只是治标，得回到 Computed 面板里看那一行最终值到底从哪来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
