改Bootstrap 5表单边框色需覆盖.focus、.is-valid、.is-invalid状态及box-shadow，因它们优先级高于--bs-border-color变量；深色模式下还需同步重设[data-bs-theme="dark"]中的对应变量。
改了--bs-border-color但.form-control边框没变？聚焦态和校验态被忽略
默认态只是冰山一角。.form-control在:focus、.is-valid、.is-invalid下各自声明了border-color，且这些规则优先级高于:root里的变量。只动--bs-border-color，它们照旧用原值。
-
.form-control:focus还带两层box-shadow，其中一层是透明边框补偿——不重写整条box-shadow，视觉上会突然“加粗” -
.is-valid和.is-invalid的边框色由--bs-form-valid-border-color和--bs-form-invalid-border-color控制，得单独覆盖 - 如果用了深色模式，还得在
[data-bs-theme="dark"]下同步重设这些变量，否则暗色下边框可能糊成一片
.modal-backdrop颜色改不动？遮罩层不是.modal的子元素
遮罩层是独立 DOM 元素，类名就是.modal-backdrop，和.modal是兄弟关系。你在.modal上设background-color或z-index，对它完全无效。
- 必须直接选中
.modal-backdrop.show（注意.show类，Bootstrap 5.3+ 靠它触发显示） - 推荐用
--bs-backdrop-bg变量覆盖，比写!important更干净；若用传统 CSS，rgba()写法 +!important缺一不可 - 检查 HTML 是否写了
data-bs-backdrop="false"——这会让遮罩层压根不生成，所有相关样式都白配
进度条底色还是浅灰？.progress容器的background-color被.bg-*类劫持
Bootstrap 5 的.progress默认就有background-color: #e9ecef，不是透明。你以为没生效，其实是它被更高权重的类盖掉了。
-
.bg-light这类工具类带!important，一旦加在.progress上，你的普通 CSS 规则直接失效 - 浏览器开发者工具里看 computed 样式，找
background-color被哪条规则覆盖——大概率是.bg-*类或 Bootstrap 自带的默认值 - 稳妥做法：不用
.bg-*控制底色，全部走自定义类（如.progress-custom-bg）+ 普通 CSS 规则
导航栏品牌文字颜色不变？CSS 加载顺序卡在最前面
这是最常被低估的底层问题。如果你的自定义 CSS 在 Bootstrap 样式之前加载，所有规则都会被覆盖——哪怕选择器再精准、属性再正确。
- 检查 HTML 的
里顺序：bootstrap.css必须在前，你的custom.css必须在后 - 不要依赖
!important硬怼，它掩盖问题但不解决问题；优先级冲突的本质是加载时机不对 - SPA 场景下还要确认 CSS 是在 DOM 就绪后注入的，否则可能被框架动态插入的样式覆盖
真正难的不是写对一行 CSS，而是搞清哪一层规则正在生效、哪一层被静默屏蔽。变量、伪类、加载顺序、DOM 结构层级——漏掉任意一环，修改就等于没改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
