必须系统覆盖多层级选择器（如.form-control、.input-group > *、:focus等）并同步处理form-floating和input-group的布局干扰，单点修改会因bootstrap 5高权重规则覆盖而失效。
能覆盖，但必须绕过 Bootstrap 5 的选择器权重陷阱、CSS 变量劫持和布局模型切换——直接写 .btn { border-radius: 0; } 很可能让按钮塌陷、圆角失效，甚至引发栅格错位。
为什么 .form-control 圆角一改就丢？
Bootstrap 5 的 form-control 圆角由 $border-radius 和 $input-border-radius 两个 Sass 变量共同控制；纯 CSS 覆盖 border-radius 会被 .input-group > .form-control 这类高权重组合选择器压掉，尤其当它嵌套在 input-group 里时，左右圆角还被拆开重置。
实操建议：
- 只改搜索框？优先重定义
$input-border-radius: 0.5rem;，再@import "bootstrap/scss/functions";后导入 Bootstrap - 要全局统一圆角？改
$border-radius，但必须同步检查$border-radius-sm和$border-radius-lg是否按比例缩放合理 - 用 CSS 覆盖时，必须用组合选择器：
.input-group > .form-control.search-rounded，而非单类.search-rounded - 别碰
!important—— 它会让后续深色模式或 JS 动态主题切换完全失效
:root 覆盖变量为什么没反应？
浏览器看到 :root { --bs-primary: #e74c3c; } 却没变色，大概率是变量名拼错、加载顺序错，或漏了配套的 RGB 值。Bootstrap 5.3+ 的 box-shadow、background-color 等大量依赖 var(--bs-primary-rgb)，只改 --bs-primary 不补 --bs-primary-rgb，颜色就卡在默认值上。
实操建议：
- 确保
<style>:root { ... }</style>出现在<link href="bootstrap.min.css">之后，且 Network 面板确认其请求时间晚于 Bootstrap - 变量名必须一字不差：
--bs-primary（不是--primary或--bs-color-primary） - 所有涉及透明度的用法（如
rgba(var(--bs-primary-rgb), .1)）都要求--bs-primary-rgb存在，格式为106, 74, 205（无括号、无单位、逗号后空格） - 局部换色？写
.marketing-section { --bs-primary: #6a5acd; --bs-primary-rgb: 106, 74, 205; }，避免污染后台管理页
怎么让自定义样式只作用于某一块区域？
想在新弹窗里用 .btn，又怕影响首页导航栏的按钮样式？靠 HTML 加 class="new-modal" + 外部 bootstrap.min.css 是无效的——Bootstrap 没作用域意识。真正起效的是 SCSS 层级包裹，把整套 Bootstrap 规则编译进一个父选择器下。
实操建议：
- 新建
scoped-bootstrap.scss，按顺序@import "bootstrap/scss/functions";→@import "bootstrap/scss/variables";→.my-modal { @import "bootstrap/scss/utilities"; } - 不要导入
components（如 buttons、cards），除非你明确需要它们的样式；否则容易和旧页面的.btn冲突 - DOM 结构必须匹配：
<div class="my-modal"><button class="btn">…</button></div>，容器 class 必须是根节点 - Webpack/Vite 中需配置
includePaths，否则@import "bootstrap/scss/utilities"找不到路径
最容易被忽略的是 reboot.css 的“隐身重置”：它悄悄改了 button 的字体大小、边框样式和盒模型，很多“按钮变矮了”“文字看不清”其实是它在背后生效，而不是你写的覆盖规则出了问题。打开 DevTools 的 Computed 面板，从 top 到 bottom 逐行看 font-size、border、padding 是谁设的，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
