css - 如何在嵌套 Accordion 中更改特定 Accordion 的背景颜色？

我正在尝试在嵌套手风琴（prime ng）中更改手风琴（第一个孩子）的背景颜色？

<p-accordion>
   <p-accordionTab header="Header 1">
      <p-accordion>
         <p-accordionTab header="Header 1">
            Content 1
         </p-accordionTab>
         <p-accordionTab header="Header 2">
            Content 2
         </p-accordionTab>
         <p-accordionTab header="Header 3">
            Content 3
         </p-accordionTab>
      </p-accordion>
   </p-accordionTab>
</p-accordion>

最佳答案

我能想到的一种解决方案如下：

1）在您的儿童手风琴上添加一个id标签：

<p-accordion>
  <p-accordionTab header="Header 1">
   <p-accordion>
     <p-accordionTab id="firstaccordion" header="Header 1">
        Content 1
     </p-accordionTab>
     <p-accordionTab header="Header 2">
        Content 2
     </p-accordionTab>
     <p-accordionTab header="Header 3">
        Content 3
     </p-accordionTab>
   </p-accordion>
  </p-accordionTab>
</p-accordion>

2）然后转到您的styles.css并添加：

#firstaccordion .ui-accordion-content{
    background-color: blueviolet !important; //your choice colour
}