直接写 .btn-primary { background-color: #ff6b6b; } 无效，因 bootstrap 5.2+ 使用 css 变量（如 --bs-btn-primary-bg）驱动样式并大量使用 !important，需重设变量或严格按顺序加载自定义 css 并覆盖全部伪类状态。
为什么直接写 .btn-primary { background-color: #ff6b6b; } 无效
不是你代码写错了，是 Bootstrap 5.2+ 根本不靠 background-color 驱动按钮样式。它用 CSS 变量（如 --bs-btn-primary-bg）动态生成所有状态的背景、边框、文字色，还大量加了 !important。你写的规则权重低、没覆盖全伪类、变量值又会覆盖你的颜色——三重失效。
必须确保自定义 CSS 在 Bootstrap 之后加载
加载顺序决定层叠位置，不是选择器多厉害就能赢。哪怕你写了 .btn.btn-primary:hover，如果 CSS 文件在 Bootstrap 前引入，照样被盖掉。
- HTML 中
<link>必须按顺序：bootstrap.min.css→ 你的custom.css - Webpack/Vite 里检查
import 'bootstrap/dist/css/bootstrap.min.css'是否在import './custom.css'之前 - 别在
<style></style>标签里写覆盖规则——它默认插到末尾，天然晚于外部 CSS，但容易被误以为“已生效”
推荐做法：重设 CSS 变量，一行生效全状态联动
改变量才是最小改动、最稳路径。不用手写一堆伪类，也不用 !important 拼权重。
- 变量名必须一字不差：
--bs-btn-primary-bg、--bs-btn-primary-border-color、--bs-btn-primary-hover-bg、--bs-btn-primary-disabled-bg、--bs-btn-primary-color—— 缺一个，对应状态就回退默认 - 想全局改，写在
:root下；只改某区域，用容器选择器，比如.my-form .btn-primary { --bs-btn-primary-bg: #7e57c2; } -
.btn-outline-primary不读--bs-btn-primary-bg，它依赖--bs-btn-color、--bs-btn-border-color、--bs-btn-bg，三个得一起设 - 深色模式下不会自动切换，得手动加
@media (prefers-color-scheme: dark)块重写一遍变量
非要用纯 CSS 覆盖？堵死全部漏洞才有效
受限于环境（比如只能加 <style></style>），那就得把所有坑一次性填满：
- 选择器必须提高权重：
.btn.btn-primary、.btn.btn-primary:hover、.btn.btn-primary:active、.btn.btn-primary:disabled、.btn.btn-primary:focus、.btn.btn-primary:focus-visible全部显式写出 - 每个状态里三属性齐上：
background-color、border-color、color—— 缺一不可，否则文字看不见或边框突兀 - 别漏掉圆角和阴影：
border-radius和box-shadow在.btn-lg或.btn-sm下可能错位，得同步调 -
.btn类本身也参与计算，光写.btn-primary不够，必须带上.btn前缀
:disabled）和焦点态（:focus-visible）常被当成“次要状态”跳过，结果用户点一下按钮就闪回默认蓝，或者键盘 tab 时根本看不到焦点环。变量方案能一并解决，而纯 CSS 覆盖必须每种状态都亲手写到，少一个就露馅。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
