bootstrap css必须在自定义css之前加载，否则后加载的同名规则会直接覆盖前者，与选择器权重无关；常见错误是html中link顺序颠倒或webpack/vite中import顺序错误。
Bootstrap的CSS后加载，你的样式就必然被覆盖——这不是权重问题，是浏览器解析顺序决定的层叠结果。
检查标签顺序是否颠倒
最常见错误就是把自定义CSS放在Bootstrap之前。浏览器按HTML中出现顺序加载CSS，后加载的同名规则直接覆盖前面的，不管选择器多弱。
- ✅ 正确：
<link href="bootstrap.min.css">→<link href="style.css"> - ❌ 错误：
<link href="style.css">→<link href="bootstrap.min.css"> - Webpack/Vite项目里，确认
import 'bootstrap/dist/css/bootstrap.min.css'写在import './style.css'之前 - 用
<style></style>标签写覆盖规则？它默认插入末尾，天然晚于外部CSS，慎用
排查是否被PurgeCSS或UnoCSS误删类名
构建工具启用按需生成（如PurgeCSS、UnoCSS、Tailwind的content扫描）后，若配置没覆盖到动态拼接的类名，那些类就会消失，看起来像“样式失效”。
- 临时关闭PurgeCSS：Vite中设
build.cssMinify: 'light'，或注释掉purge配置 - Tailwind用户检查
content数组是否包含所有模板路径，例如content: ['./index.html', './src/**/*.{vue,js,ts}'] - Vue里
class="btn btn-${type}"这种写法，若type值未被扫描到，btn-primary等类可能被干掉
验证是否因scoped或CSS-in-JS导致作用域隔离
Vue单文件组件加了scoped，或React用了styled-components，它们生成的类名带哈希后缀（如btn__a1b2c），而Bootstrap的.btn是全局类，根本不会匹配到你组件内部的元素。
- 想让Bootstrap样式生效：确保目标元素没被包裹在
scoped或Shadow DOM隔离环境中 - 想覆盖Bootstrap：要么去掉
scoped，要么用深度选择器（Vue的:deep(.btn)） - CSS-in-JS库默认不支持全局类注入，需显式启用
createGlobalStyle等机制
别迷信!important，优先用Bootstrap变量体系覆盖
直接重写.btn-primary容易漏掉:hover、:disabled等状态；Bootstrap 5+ 提供CSS自定义属性作为官方扩展入口，这才是安全路径。
- 在Bootstrap引入之后、自定义样式之前注入：
:root {<br> --bs-btn-color: #2c3e50;<br> --bs-btn-bg: #3498db;<br> --bs-btn-hover-bg: #2980b9;<br>} - 变量名以
--bs-开头，完整列表见Bootstrap官方_variables.scss - 不要在
:root外部覆盖变量，否则可能被后续reset覆盖 - 用Sass时，应在
@importBootstrap前定义变量，效果等价但更早介入
真正容易被忽略的是：开发环境和生产环境的加载时机差异——CDN资源在本地可能因缓存缺失或网络延迟而晚于自定义CSS加载，导致“有时生效有时不”，这时候光看HTML顺序还不够，得结合Network面板看实际加载时间戳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
