根本原因是CSS加载顺序错位或作用域隔离导致规则未参与层叠；需确保Bootstrap CSS在自定义CSS之前引入，且排查scoped、CSS-in-JS、PurgeCSS误删及Sass变量耦合问题。
根本原因不是选择器权重不够，而是 CSS 加载顺序错位或作用域隔离导致规则根本没参与层叠。
检查 HTML 中
Bootstrap 4 的 bootstrap.min.css 必须在自定义 CSS 文件之前引入，否则即使你的 .btn { color: red; } 权重更高，也会被后加载的 Bootstrap 规则覆盖——因为浏览器按顺序解析，后到者胜出。
- ✅ 正确：
- ❌ 错误：
- Webpack/Vite 项目中，确认
import 'bootstrap/dist/css/bootstrap.min.css'出现在import './style.css'之前 - 用
标签写覆盖？它默认插入末尾，天然晚于外部 CSS，慎用
排查是否因 scoped 或 CSS-in-JS 导致样式未命中
Vue 单文件组件加了 scoped，或 React 用了 styled-components，会生成带哈希的类名（如 btn__a1b2c），而 Bootstrap 的 .btn 是全局类，两者不会互相匹配。
- 你在
里写.btn { color: red; }，实际不会生效，因为 DOM 上的元素没有那个哈希后缀 - 想让 Bootstrap 生效：确保目标元素不在
scoped或 Shadow DOM 隔离范围内 - 想覆盖 Bootstrap：去掉
scoped，或用 Vue 的:deep(.btn)、React 的createGlobalStyle显式注入
验证是否被 PurgeCSS / 构建工具误删类名
Bootstrap 4 项目常配 PurgeCSS 或类似工具，若配置未覆盖动态拼接的类名（如 class="btn btn-${type}"），那些类会被剔除，样式自然消失。
- 临时关闭 PurgeCSS（Vite 中设
build.cssMinify: 'light'）看是否恢复 - Tailwind 用户检查
content数组是否包含所有模板路径，例如content: ['./index.html', './src/**/*.{vue,js,ts}'] - Bootstrap 4 的工具类（如
.mt-3、.d-flex）极易被误删，需显式声明保留
别忽略 Bootstrap 4 的 Sass 变量耦合特性
直接覆盖 .btn-primary { background-color: #e74c3c; } 看似简单，但会导致其他依赖同一主题色的组件（如 .alert-primary、.border-primary）颜色不一致，且深色模式完全无法响应。
- 改
$primary变量必须走完整 Sass 编译流程，且要提前于@import "bootstrap/scss/variables" - 单独改
$spacer不同步更新$spacersmap，会导致mt-4实际值与预期不符 - 深色模式需手写媒体查询 + 全量变量重定义，无内置钩子
最常被跳过的一步：打开开发者工具的 Computed 面板，点开失效属性，看哪条规则被划掉；再切回 Styles 面板，确认来源文件和加载时机——很多“权重不够”的判断，其实只是规则压根没加载进来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
