直接改--bs-highlight-bg变量即可生效，但需确保在Bootstrap CSS加载后、通过:root或局部选择器正确声明，且避免硬编码样式覆盖mark元素的background-color: var(--bs-highlight-bg)规则。
直接改 --bs-highlight-bg 变量就能生效，但得确保作用域和优先级
Bootstrap 5.3+ 原生支持通过 CSS 自定义属性（即 CSS 变量）控制文本高亮背景色，对应变量是 --bs-highlight-bg。它被用在 .highlight 类和 mark 元素里。但直接在 :root 下覆盖不一定起作用——因为 Bootstrap 的默认样式可能在更具体的选择器里声明，或者被后续加载的 CSS 覆盖。
实操建议：
- 在 Bootstrap CSS 加载完成之后、自己的样式之前注入自定义变量（例如放在
最后一个<link>后面的<style></style>中） - 用
:root声明，且加上!important是冗余的，CSS 变量本身不支持!important，靠声明顺序和作用域控制即可 - 如果只改局部区域，可以写成
.my-section { --bs-highlight-bg: #ff6b6b; }，这样内部所有mark都会响应变化
mark 标签没变色？检查是否被其他样式重置了
常见现象：改了 --bs-highlight-bg，但页面里的 mark 还是黄色。大概率是因为项目中存在类似 mark { background-color: yellow; } 这样的硬编码样式，它会覆盖基于变量的计算值（background-color: var(--bs-highlight-bg);）。
解决方法：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → 选中
mark元素 → 看「Styles」面板里background-color的实际来源，确认是不是被更高优先级规则覆盖 - Bootstrap 5.3 的
mark规则是mark { background-color: var(--bs-highlight-bg); padding: 0.1875em; }，所以只要变量生效，样式就该更新 - 避免用标签选择器重置
mark；如必须定制，改用mark { background-color: var(--bs-highlight-bg); }保持联动
动态修改要 JS 配合，但别直接操作 style 属性
运行时切换颜色（比如用户点按钮换主题），不能只改 HTML 元素的 style，而应更新 CSS 变量作用域——最稳妥的是改 :root 或某个父容器的 style.setProperty。
示例（安全写法）：
document.documentElement.style.setProperty('--bs-highlight-bg', '#4ade80');注意点：
- 别写
document.body.style.setProperty(...)，因为:root才是 Bootstrap 变量的原始作用域 - 如果用了 scoped 主题容器（比如
.theme-dark { --bs-highlight-bg: #374151; }），那就对那个元素调用setProperty - 修改后无需手动触发重绘，浏览器自动响应变量变化
兼容性与构建环境里的坑
这个方案依赖原生 CSS 变量，IE 完全不支持，Edge 16+、Chrome 49+、Firefox 31+ 没问题。如果你用 Sass 编译 Bootstrap，要注意：--bs-highlight-bg 是在 CSS 输出阶段才注入的变量，不是 Sass 变量，所以不能在 _variables.scss 里改它——那是给 Sass 编译器用的，和运行时无关。
容易忽略的细节：
- 使用 CDN 引入 Bootstrap CSS 时，确保版本 ≥ 5.3.0（早期 5.x 版本没有这个变量）
- Vite / Webpack 项目中若启用了 CSS 提取或压缩，某些插件可能误删未使用的 CSS 变量（尽管 Bootstrap 已声明），可加注释保留：
/* @preserve */ :root { --bs-highlight-bg: ... } - 服务端渲染（SSR）场景下，首次 HTML 直出的颜色是静态的，JS 修改变量后才会更新，需考虑首屏视觉一致性
