直接写 .btn { color: red } 无效，是因为 bootstrap 5 使用高权重组合选择器（如 .btn.btn-primary）和 !important 分别控制默认态、:hover、:active、:disabled、:focus 等状态，.btn 单类权重过低被忽略；必须全覆盖各状态并同步修改 color、background-color、border-color，或改 :root 下 css 变量（如 --bs-btn-primary-bg）实现稳定生效。
为什么直接写 .btn { color: red } 没用
不是你代码写错了，是 Bootstrap 5 的 .btn 样式由多层规则叠加控制：默认态、:hover、:active、:disabled、:focus 都有独立选择器，且大量使用 !important 和高权重组合（如 .btn.btn-primary）。你只写 .btn，权重天然低于它，浏览器直接忽略。
常见错误现象：
– 按钮文字变红了，但 hover 时又回蓝
– 点击后边框颜色没同步变
– 移动端焦点环消失或错位
- 必须显式覆盖全部状态：
.btn:hover、.btn:active、.btn:disabled、.btn:focus一个都不能少 - 每个状态下至少同步改三属性：
color、background-color、border-color - 确保你的 CSS 文件在
bootstrap.min.css之后加载，否则整段规则被跳过
用 :root 变量覆盖比写一堆选择器更稳
Bootstrap 5 把样式源头收口到 CSS 变量，比如按钮背景色由 --bs-btn-primary-bg 控制，字体由 --bs-font-sans-serif 控制。改变量，所有依赖它的组件自动响应，不用手动补状态链。
但要注意：
– 变量名必须一字不差，--bs-btn-primary-bg 不是 --primary-bg
– 必须写在 :root 下，且在 bootstrap.min.css 加载之后
– !important 对变量声明无效，写了整行会被浏览器忽略
- 全局换主色：
:root { --bs-primary: #4a5568; } - 局部换色（比如只在侧边栏生效）：
.sidebar .btn-primary { --bs-btn-primary-bg: #4a5568; } - 深色模式需单独处理：
@media (prefers-color-scheme: dark) { :root { --bs-body-bg: #1a202c; } }
覆盖 padding / margin 时别硬写 !important
对 .container 直接写 padding: 0 !important 看似快，实则破坏响应式逻辑——Bootstrap 在不同断点下给它设了不同左右内边距（xs 是 0，sm 是 15px，lg 是 30px），你一锁死，小屏内容就贴边溢出，大屏又失去呼吸感。
真正安全的做法是复用 Bootstrap 自带的工具类：
– 全断点清左右：px-0
– 仅 md 及以上清除：px-md-0
– 更语义化写法（Bootstrap 5.3+）：ps-0 pe-0
-
p-0清四边，容易让卡片、表单上下“塌陷”，慎用 - 用了
px-0后，记得检查.row的负 margin 是否导致列内容虚贴边；必要时加gx-0 - 如果目标是全宽布局（比如横幅图），直接换用
container-fluid，语义更准，也不用覆盖
form-control 圆角失效的典型场景和解法
.form-control 默认有 border-radius: 0.375rem，但在 .input-group 里经常被重置为 0。原因不是样式没加载，而是 .input-group > :first-child 和 .input-group > :last-child 分别控制首尾元素圆角，中间的 input 被漏掉了。
修复方式取决于结构：
– 如果搜索框是 .input-group 的第一个子元素，加 .rounded-start
– 如果在中间，直接加 border-radius: 0.375rem 并配 overflow: hidden
– 避免用 !important，优先提升选择器权重，比如写 .input-group .form-control.search-input
- 全局统一加大圆角？改 SCSS 变量
$border-radius比到处覆盖更可持续 - 开发者工具里看被划掉的
border-radius值，点开对应规则，就能定位是哪个选择器在压制 -
input[type="search"]本身有 UA 样式干扰，建议统一用<input type="text">+ 自定义 class
.dropdown-menu、.form-select）并不自动继承 --bs-font-sans-serif，得手动补一句 font-family: var(--bs-font-sans-serif)。这不是 bug，是 Bootstrap 故意把字体控制拆开，避免意外污染第三方库。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
