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

基础概念

引导手风琴（Accordion）是一种常见的用户界面组件，允许用户通过点击标题来展开或折叠内容区域。CSS（层叠样式表）用于设置网页的外观和布局。

类型

手风琴组件有多种类型，包括：

单选手风琴：一次只能展开一个部分。
多选手风琴：可以同时展开多个部分。

应用场景

FAQ页面：用于展示常见问题及其解答。
设置页面：用于组织和展示各种设置选项。
产品详情页：用于展示产品的详细信息和特性。

样式设置

要设置引导手风琴的样式，特别是使活动的卡片标题具有不同的颜色，可以使用CSS选择器和样式属性。以下是一个简单的示例：

HTML结构

<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>

CSS样式

.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;
}

解决常见问题

活动标题颜色不一致：确保.accordion-header.active选择器正确应用，并且没有其他CSS规则覆盖它。
内容不展开：确保.accordion-item.active .accordion-content选择器正确应用，并且JavaScript逻辑正确处理展开和折叠。