Bootstrap 5手风琴按钮非折叠状态CSS样式不生效问题

核心问题分析 #

你的问题主要出在CSS优先级不足，另外HTML里还有语法错误影响样式渲染：

• Bootstrap原生的.accordion-button:not(.collapsed)样式权重比你自定义的高，导致你的样式被覆盖
• HTML中<i>标签的class属性引号写错了（icon_class%>），属于语法错误，可能干扰元素的样式继承

具体修复步骤 #

1. 修正HTML语法错误
   把错误的<i class="icon_class%>"></i>改成：

<i class="icon_class"></i>

同时注意初始状态的一致性：如果按钮默认是折叠状态，aria-expanded应该设为false，配合.collapsed类；展开状态则移除.collapsed类，aria-expanded设为true。修正后的完整头部代码：

<h2 class="accordion-header" style="background-color: red" id="headingFour">
  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
    <i class="icon_class"></i>
    <span class="nav-label">Nav-label</span>
  </button>
</h2>

2. 提高CSS选择器权重
   通过增加父类选择器来提升自定义样式的权重，覆盖Bootstrap原生样式：

/* 用父类.accordion-header提高权重 */
.accordion-header .accordion-button:not(.collapsed) {
  color: #a7b1c2;
  background-color: #293846;
}

.accordion-button:hover {
  color: #a7b1c2;
  background-color: #293846;
}

如果还是不生效，可以尝试在属性后加!important（仅作为兜底方案，优先用权重提升）：

.accordion-button:not(.collapsed) {
  color: #a7b1c2 !important;
  background-color: #293846 !important;
}

3. 验证Bootstrap JS加载
   确保你已经正确引入了Bootstrap的JS文件（包括Popper.js，Bootstrap 5依赖它），否则手风琴的状态切换逻辑会失效，.collapsed类不会被正确移除/添加。

内容的提问来源于stack exchange，提问作者CUB5