CSS -设置引导手风琴的样式，以便活动的卡片标题具有不同的颜色

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">标题1</div>
    <div class="accordion-content">内容1</div>
  </div>
  <div class="accordion-item active">
    <div class="accordion-header">标题2</div>
    <div class="accordion-content">内容2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">标题3</div>
    <div class="accordion-content">内容3</div>
  </div>
</div>

.accordion-header {
  background-color: #f1f1f1;
  color: #333;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
}

.accordion-header.active {
  background-color: #4CAF50;
  color: white;
}

.accordion-content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #fff;
}

.accordion-item.active .accordion-content {
  display: block;
}