如何为带有collapse show类的Bootstrap手风琴卡片头部设置样式？

你的CSS选择器存在两处错误，导致样式不生效：

• 多余的空格：.card-header button .btn.btn-link中的空格表示选中button内部的.btn.btn-link元素，但按钮本身就带有btn btn-link类，正确写法应为.card-header button.btn.btn-link或直接.card-header .btn.btn-link
• 选择器未正确关联展开状态的面板逻辑

以下是两种纯CSS解决方案，无需JavaScript：

方案1：利用Bootstrap自带的按钮状态类（推荐，兼容性好） #

Bootstrap折叠面板展开时，触发按钮会自动移除.collapsed类；收起时则添加该类。直接针对未折叠的按钮设置样式即可：

.accordion .card .card-header .btn.btn-link:not(.collapsed) {
  background-color: #FEB7EE;
}

方案2：通过collapse show关联样式（需现代浏览器支持） #

使用CSS的:has()选择器，匹配包含.collapse.show的卡片，再设置其card header的样式：

/* 给card header本身设置样式 */
.accordion .card:has(.collapse.show) .card-header {
  background-color: #FEB7EE;
}

/* 给card header里的按钮设置样式 */
.accordion .card:has(.collapse.show) .card-header .btn.btn-link {
  background-color: #FEB7EE;
}

注意：:has()选择器目前支持Chrome、Firefox 121+、Edge等现代浏览器，若需兼容旧版浏览器，优先使用方案1。

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