Accordion标题文字颜色需用.accordion-button:not(.collapsed)设展开态（白字），.accordion-button.collapsed设折叠态（黑字），依赖状态类联动而非:focus；须避免color污染SVG图标，推荐用.accordion-button > *:not(svg):not(i)精准控制文字色。
Accordion标题文字颜色随展开状态动态切换
Bootstrap 5.3+ 的 .accordion-button 本身不带“选中”伪类（如 :focus 或 :active），所谓“被选中”，实际指面板处于展开态——此时 .collapsed 类被移除，.accordion-button:not(.collapsed) 才是目标选择器。直接写 .accordion-button:focus 不会生效，因为点击后焦点很快转移，且视觉反馈不与展开状态同步。
用 :not(.collapsed) 控制展开态文字色
展开时改文字颜色，必须依赖 Bootstrap 自动管理的 .collapsed 类存在与否。这个类只在折叠态存在，展开时被 JS 移除——不是“加”，而是“删”。所以：
-
.accordion-button:not(.collapsed) { color: white; }→ 展开时生效 -
.accordion-button.collapsed { color: #212529; }→ 折叠时生效 - 别写
.accordion-button.collapsed:not(.collapsed)这种矛盾组合，永远不匹配 - 如果用了深色模式，记得补
@media (prefers-color-scheme: dark)块重定义两套颜色
避免图标跟着变色
直接给 .accordion-button 设 color 会污染内部 SVG 图标（因为 Bootstrap Icons 默认用 fill="currentcolor"）。结果就是文字变白了，箭头也变白，在白色背景上直接消失。
稳妥做法是只作用于文字节点：
- 手动在 HTML 中包裹文字：
<span class="accordion-button-text">标题</span>，再写.accordion-button-text { color: white; } - 或用属性排除法：
.accordion-button > *:not(svg):not(i) { color: white; }（兼容性够用，但 IE 不支持） - 千万别加
!important强制 color —— 图标继承会被一并覆盖
为什么写了没反应？常见失效原因
最常踩的坑不是写错 CSS，而是上下文不对：
- CSS 文件加载顺序错：你的自定义样式必须在 Bootstrap CSS
<link>之后引入，否则被覆盖 - 外层容器有
overflow: hidden（尤其用了data-bs-parent时），把按钮裁掉了一截，computed 样式里 border 和 padding 看着正常，但实际渲染被截断 - 用了 Sass 编译但没重跑构建：改了变量
$accordion-btn-active-color却没重新编译，CSS 还是旧的 - 检查浏览器开发者工具里
.accordion-button元素是否真有collapsed类——没有，说明 JS 没加载或初始化失败
状态类联动这事看着简单，但一旦选择器权重、加载时机、JS 初始化、CSS 变量作用域四者有一环没对齐，颜色就卡在默认值不动。
