必须使用 CSS 变量 --bs-popover-header-bg 覆盖，因 Bootstrap 5 通过该变量动态控制 .popover-header 背景色，直接写 background-color 会被高优先级变量或内联样式覆盖。
直接改 .popover-header 的 CSS 无效，是因为 Bootstrap 5 默认用 CSS 变量控制颜色，硬写类选择器会被高优先级内联规则或变量计算覆盖。
为什么单独写 .popover-header { background-color: red } 不生效
Bootstrap 5+ 的 .popover-header 背景色由 --bs-popover-header-bg 变量驱动，不是靠 background-color 声明直出。即使你写了样式，只要变量存在且作用域正确，它就会被动态注入并覆盖你的声明。
- 浏览器 DevTools 里能看到
.popover-header元素的 computed background-color 来自--bs-popover-header-bg，而不是你写的 CSS 规则 - Popover 是 JS 动态插入 DOM 的，挂载点通常在
下，所以局部style或组件 scoped CSS 很难命中 - Bootstrap 自带的
.popover-header规则带!important（部分版本），进一步压制普通选择器
必须用 --bs-popover-header-bg 变量覆盖
这是唯一稳定、全局生效的方式。变量需在 Bootstrap CSS 加载之后、且作用于能被 Popover 浮层继承的上下文（通常是 :root 或 body）。
- 写在
的里，确保顺序：→ - 别拼错变量名：
--bs-popover-header-bg（不是--bs-popover-head-bg或--bs-popover-header-background） - 如果只改单个 Popover，可在触发元素上设内联变量：
，但注意这不会影响.popover-body或箭头色
配套变量要一起设，否则视觉割裂
只改 header 背景，不调 body 和箭头，会导致颜色不协调。Popover 是三段式结构：.popover（容器）、.popover-header、.popover-body，箭头是伪元素生成，也依赖变量。
- header 背景：
--bs-popover-header-bg - body 背景：
--bs-popover-bg（别漏掉，否则 body 还是白底） - 边框色：
--bs-popover-border-color（默认透明度高，建议显式设实色） - 箭头颜色：
--bs-popover-arrow-color（必须设，否则箭头还是浅灰，和 header 不匹配）
示例（推荐放在 块末尾）：
:root {
--bs-popover-header-bg: #1e40af;
--bs-popover-bg: #3b82f6;
--bs-popover-border-color: #1d4ed8;
--bs-popover-arrow-color: #1e40af;
}
旧项目或需要局部覆盖时，用 container + 自定义 class 更可控
如果你无法控制加载顺序，或只对某几个按钮启用定制 Popover，container 选项配合 class 前缀是更稳妥的 fallback 方案。
- JS 初始化时指定：
new bootstrap.Popover(el, { container: '.my-popover-container' }) - HTML 中等效：
- 然后写带前缀的 CSS：
.my-popover-container .popover-header { background-color: #1e40af !important; }—— 注意加!important，因为 Popover 内联样式会干扰 - 这个方案绕过变量，兼容 Bootstrap 5.0–5.3 所有小版本，但维护成本略高，且不能响应深色模式自动切换
变量名大小写、连字符、作用域层级，这三个地方错一个，.popover-header 就不会变色。别在 DevTools 里手动改 computed 值验证——那只是临时快照，得看 Styles 面板里哪条规则真正“生效”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
