Bootstrap手风琴展开状态按钮背景色无法修改求助

你遇到的问题是因为Bootstrap对手风琴按钮的展开状态（无.collapsed类的状态）内置了更高优先级的样式规则，你写的.accordion-button选择器优先级不够，所以被默认的蓝色样式覆盖了。

直接用以下CSS代码覆盖即可：

/* 覆盖展开状态的按钮背景色 */
.accordion-button:not(.collapsed) {
    background-color: #fbfbef; /* 你要的黄色系颜色 */
    border-color: transparent; /* 可选：去掉展开时默认的边框 */
    box-shadow: none; /* 可选：去掉展开时默认的内阴影 */
}

/* 确保收起状态的按钮样式一致 */
.accordion-button.collapsed {
    background-color: #fbfbef;
}

/* 保留你原来的其他样式 */
h4,
p,
#copyright {
    color: #fbfcfd;
    padding-left: 10px;
}

.accordion-body{
    background-color: #7aa8bd;
}

如果需要调整箭头图标的颜色，让它和黄色背景适配，可以再加这段：

/* 修改展开/收起时的箭头图标颜色 */
.accordion-button:not(.collapsed)::after,
.accordion-button.collapsed::after {
    filter: invert(1) grayscale(100%) brightness(0.8); /* 可根据需求调整参数 */
}

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