jQuery Accordion 分别设置所有活动标题的样式

如何解决jQuery Accordion 分别设置所有活动标题的样式

我想分别设置每个手风琴标题的样式，但遗憾的是不知道如何设置。使用 .ui-accordion .ui-accordion-header-active 允许我设置所有标题的样式，同时添加一个 id #header-one .ui-accordion .ui-accordion-header-active没有什么。我可能错过了一些非常明显的东西，因为我对此很陌生。

下面的片段解释了我想要做什么。

$(function() {
  $("#accordion").accordion({
    collapsible: true
  });
});

.ui-accordion .ui-accordion-content {
  padding: 0;
}

.ui-accordion .ui-accordion-header {
  padding: 20px;
  background: #f5f4f4;
  color: black;
}

#header-one {
  background-color: green;
}

#header-two {
  background-color: cyan;
}

#header-three {
  background-color: blue;
}

#header-four {
  background-color: magenta;
}


/*this works but uses the same color for everything*/

.ui-accordion .ui-accordion-header-active {
  background-color: black !important;
}


/*this does not work*/

#header-three .ui-accordion .ui-accordion-header-active {
  background-color: yellow !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div id="accordion">
  <h3 id="header-one">HEADER 1</h3>
  <p>text</p>
  <h3 id="header-two">HEADER 2</h3>
  <p>text</p>
  <h3 id="header-three">HEADER 3</h3>
  <p>text</p>
  <h3 id="header-four">HEADER 4</h3>
  <p>text</p>
</div>