Bootstrap 5用css改变打开手风琴的按钮文本颜色

Question

当手风琴打开但未悬停时，我想更改按钮内 div 内文本的外观（颜色）。当手风琴打开时，我已经能够在悬停时更改文本的颜色，但是一旦我不再悬停在文本上并且手风琴打开，文本颜色再次变为灰色而不是保持红色。当手风琴面板打开但不悬停时，我正在寻求帮助以保持按钮内文本的颜色。 IE。当悬停在手风琴打开时，颜色是深红色，当手风琴打开但未悬停时，我希望它保持深红色。当手风琴折叠时，我希望文本是灰色的。手风琴面板打开时的悬停标题 (div.btn_inner-silver) 文本颜色 悬停时显示的文本颜色。

关闭时的外观

悬停时文本的显示方式

未折叠/打开时的显示方式

我希望它在打开/未折叠时的显示方式

HTML 标记

<div class="accordion" id="acrd_sidebar1-14">
<!--   DATE/TIME   -->
<div class="accordion-item">
<h2 class="accordion-header" id="hdr_timestamp1-14">
   <button type="button" aria-expanded="true" data-mdb-toggle="collapse" data-mdb-target="#collapsetimestamp1-14" aria-controls="collapsetimestamp1-14" class="accordion-button pd_all8 btn_sidebar-brand">
      <div class="btn_inner-silver" >
         Date + Time
      </div>
   </button>
</h2>

CSS

.btn_inner-silver {
    width: 100%;
    margin: 0;
    padding: 8px;
    border: 1px solid silver!important;
    background: white;
    text-align: center!important;
    font-weight: 400;
    color: silver;
}

.btn_inner-silver:hover {
    color: #981e21;
}

.btn_inner-silver collapsed {
    color: #981e21;
}

h2.accordion-header button.accordion-button.btn_sidebar-brand div.btn_inner-silver collapsed:focus {
    color: pink!important;
}

问题摘要

当选定的折叠面板打开/未折叠时，我如何保持文本红色的颜色?

我尝试了很多方法，但无法定位打开状态。我用谷歌搜索了很多，筛选了堆栈，反复试验并失败了。希望得到帮助。我是新手。

Answer 1

首先，您似乎错过了以下规则中collapsed 前面的.。

.btn_inner-silver collapsed {
    color: #981e21;
}

其次，在Accordion example here 中，他们使用CSS pseudo-class :not() 来定位没有.collapsed 类的元素。

所以我想你应该是这样的：

.accordion-button:not(.collapsed) .btn_inner-silver{
    color: #981e21;
}