自定义css不生效主因是加载顺序错误和选择器权重不足：需确保custom.css在html中位于bootstrap.min.css之后，用.btn.my-btn等组合选择器提权至0,0,2,0，避免!important与scoped/css modules误用。
自定义 CSS 样式不生效，基本不是你写错了，而是它压根没参与层叠竞争——bootstrap.min.css 先加载、选择器权重更高，你的规则被“静默过滤”了。
检查 HTML 中 <link> 的实际加载顺序
你以为在 JS 里 import 'bootstrap.css'; import './custom.css'; 就够了？构建工具（Vite/Webpack）可能把所有 CSS 打包进一个文件，并按依赖图重排顺序。最终起作用的是浏览器解析的 HTML 源码里的 <link> 顺序。
- 右键页面 → “查看页面源代码”，确认
bootstrap.min.css的<link>确实在你的custom.css之前 - CDN 场景下，手动把自定义 CSS 的
<link>放在 Bootstrap<link>下方，且不要加async或defer - Vite 用户检查
vite.config.ts是否启用了css.preprocessorOptions，它可能导致样式注入时机错乱 - Django 用户注意：
{% static 'css/custom.css' %}路径要真实存在，Network 面板确认返回 200
用组合选择器提权，别堆 !important
.btn { color: red } 几乎无效，因为 Bootstrap 的 .btn.btn-primary 权重是 0,0,2,0，而你的只有 0,0,1,0。后加载也赢不了。
- 写成
.btn.my-btn（元素同时有btn和my-btn类），权重立刻升到0,0,2,0，和原生规则平级 - 或加父容器限定：
.header .navbar-brand、#app .carousel-item，既提权又限域 - 避免
!important：Bootstrap 5.3+ 已在部分工具类（如.d-none）里用了!important，你再加就容易对冲失效 - 别用 ID 选择器（如
#nav-brand）强行提权——破坏可维护性，且和 React/Vue 组件化思路冲突
Vue/React 项目中 <style scoped></style> 或 CSS Modules 不覆盖全局类
你在 Vue 单文件组件里写 <style scoped></style>，或者 React 用 Button.module.css，然后给按钮加 class="btn btn-primary my-btn"——这时 .my-btn 样式根本不会影响 .btn 的表现，因为 scoped 和 CSS Modules 只作用于你声明的类名，不参与全局层叠。
- 要覆盖
.btn，必须把规则写在**全局 CSS 文件**中，并确保它在 Bootstrap 之后加载 - 如果坚持模块化方案，可用
className={clsx('btn btn-primary', styles.myBtn)}+ 全局提权选择器（如.my-section .btn）配合 - 注意：
.btn:focus是伪类，scoped 类无法穿透；CSS Modules 里:global(.btn)写法不稳定，不推荐
验证谁真正赢了：用开发者工具看 Computed 和 Styles 面板
打开 DevTools → Elements 面板选中目标元素（比如 <button class="btn btn-primary"></button>）→ 切到 Styles 面板，看你的规则是否被划掉；再点进 Computed 面板，看属性值来源是不是 bootstrap.min.css。
- 被划掉的规则 = 被更高权重或同权重但更早声明的规则覆盖 鼠标悬停在某条 CSS 规则上，DevTools 有时会显示
- 点击规则旁的文件名（如
bootstrap.min.css:123或custom.css:45），快速定位哪一行在起作用或作废 - 轮播图常见误写：
.c-item（错误） vs.carousel-item（正确）——类名不对，连匹配都失败，更别说覆盖
specificity: 0,0,2,0 这类值，数字越大优先级越高
最常被忽略的一点：即使你改对了选择器、调好了顺序，如果目标元素没真正应用那个类（比如漏写 class="carousel-item"），或者用了 <style scoped></style> 却指望它改全局类，问题依然存在。验证永远从 DOM 结构和浏览器实际解析结果开始，而不是从“我代码应该没错”出发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
