如何为Bootstrap手风琴内不同面板的avactr表格设置差异化样式？

首先得明确：CSS本身没法直接根据元素的样式值（比如background-color或color）来选择元素，这也是你直接写样式无效的核心原因之一。另外，Bootstrap手风琴的层级结构也容易让选择器写错，导致选中错误的元素。下面分两种场景给你解决方案：

场景1：标题颜色通过CSS类设置（推荐方案） #

这是最易维护的方式，给不同颜色的标题面板单独加类，再通过兄弟选择器关联到对应的表格。

假设你的手风琴结构大概是这样（Bootstrap经典结构）：

<div id="avs4" class="accordion">
  <div class="panel panel-default">
    <div class="panel-heading panel-red"> <!-- 红色标题的类 -->
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">红色标题面板</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
        <table class="avactr">...</table>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading panel-blue"> <!-- 蓝色标题的类 -->
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse2">蓝色标题面板</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
        <table class="avactr">...</table>
      </div>
    </div>
  </div>
</div>

对应的CSS代码：

/* 红色标题对应的表格样式 */
#avs4 .panel-red ~ .panel-collapse .avactr {
  border: 2px solid #dc3545;
  background-color: #f8d7da;
}

/* 蓝色标题对应的表格样式 */
#avs4 .panel-blue ~ .panel-collapse .avactr {
  border: 2px solid #0d6efd;
  background-color: #cce5ff;
}

这里用了兄弟选择器~，因为.panel-heading和.panel-collapse是同一层级的兄弟元素，通过这个选择器就能精准关联到对应标题下的表格。

场景2：标题颜色是内联style设置的（只能用JS处理） #

如果标题颜色是直接写在style属性里的（比如<div class="panel-heading" style="background-color: red;">），CSS就无能为力了，得用JavaScript来读取标题颜色，再给对应表格设置样式：

// 遍历avs4下的所有面板标题
document.querySelectorAll('#avs4 .panel-heading').forEach(heading => {
  // 获取标题的实际计算颜色（兼容内联和CSS类设置的颜色）
  const headingBgColor = window.getComputedStyle(heading).backgroundColor;
  // 找到当前面板下的avactr表格
  const targetTable = heading.closest('.panel').querySelector('.panel-collapse .avactr');
  
  if (!targetTable) return; // 没有表格就跳过
  
  // 根据颜色值设置表格样式
  switch(headingBgColor) {
    case 'rgb(255, 0, 0)': // 红色的RGB值
      targetTable.classList.add('red-table');
      break;
    case 'rgb(0, 0, 255)': // 蓝色的RGB值
      targetTable.classList.add('blue-table');
      break;
    // 可以继续添加更多颜色判断
  }
});

然后你可以提前写好对应的CSS类：

.red-table {
  border-color: red;
  background-color: #ffebee;
}
.blue-table {
  border-color: blue;
  background-color: #e3f2fd;
}

为什么你之前的代码无效？ #

大概率是选择器层级错误。比如你如果写了#avs4 .avactr:first-child，这个选择器会选中每个父元素下的第一个.avactr元素，而不是整个#avs4下的第一个表格。正确的第一个面板表格选择器应该是：

#avs4 .panel:first-child .panel-collapse .avactr {
  /* 第一个面板的表格样式 */
}

内容的提问来源于stack exchange，提问作者NekoLopez