【发布时间】：2018-02-28 21:11:47
【问题描述】：
我在一个 div (ID:avs4) 中有一个 bootstrap 手风琴，每个面板标题都有特定的颜色，每个面板主体都有一个具有相同类 (avactr) 的表：
#avs4 :nth-child(1) tbody tr:nth-child(1) td:first-child {
background: #047AB7;
}
#avs4 :nth-child(2) tbody tr:nth-child(1) td:first-child {
background: #42B77A;
}
#avs4 :nth-child(1) tbody tr:nth-child(1) td:first-child a,
#avs4 :nth-child(2) tbody tr:nth-child(1) td:first-child a {
color: #FFF;
}<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="avs4">
<div class="panel-group" id="avancesacorf" role="tablist" aria-multiselectable="true" style="margin-bottom:0px;border-left: 1px solid #047ab7;border-right: 1px solid #047ab7;">
<div class="panel panel-default" style="margin-top:0px;border-radius:0px;border:none;">
<div class="panel-heading" role="tab" id="heading16" style="padding: 0px;background: none;">
<table class="table avelem" style="margin-bottom:0px;">
<tbody>
<tr>
<td style="text-align:center;width:50%;">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#avancesacorf" href="#collapse16" aria-expanded="false" aria-controls="collapse16">Progress</a>
</td>
<td style="background:#FFF;text-align:center;">User 01</td>
</tr>
</tbody>
</table>
</div>
<div id="collapse16" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading16" aria-expanded="false" style="height: 0px;">
<div class="panel-body" style="padding:0px;">
<table class="table avactr" style="margin-bottom:0px;">
<tbody>
<tr>
<td style="width:50%;text-align:center;">Files</td>
<td style="background:#FFF;color:#000;text-align:center;"><a target="_blank" href="https://cdn.filestackcontent.com/LuZN13YUT6mc73TJeIs4"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> doc-prueba.docx</button></a></td>
</tr>
<tr>
<td style="text-align:center;">Rate 01</td>
<td style="background:#FFF;color:#000;text-align:center;">5 / 5</td>
</tr>
<tr>
<td style="text-align:center;">Rate 02</td>
<td style="background:#FFF;color:#000;text-align:center;">300 / 300</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel panel-default" style="margin-top:0px;border-radius:0px;border:none;">
<div class="panel-heading" role="tab" id="heading14" style="padding: 0px;background: none;">
<table class="table avelem" style="margin-bottom:0px;">
<tbody>
<tr>
<td style="text-align:center;width:50%;">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#avancesacorf" href="#collapse14" aria-expanded="false" aria-controls="collapse14">Progress</a>
</td>
<td style="background:#FFF;text-align:center;">User 02</td>
</tr>
</tbody>
</table>
</div>
<div id="collapse14" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading14" aria-expanded="false" style="height: 0px;">
<div class="panel-body" style="padding:0px;">
<table class="table avactr" style="margin-bottom:0px;">
<tbody>
<tr>
<td style="width:50%;text-align:center;">Files</td>
<td style="background:#FFF;color:#000;text-align:center;"><a target="_blank" href="https://cdn.filestackcontent.com/twvU9uWSvvCWPh2jvuOQ"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> modelo-doc.jpg</button></a></td>
</tr>
<tr>
<td style="text-align:center;">Rate 01</td>
<td style="background:#FFF;color:#000;text-align:center;">1 / 1</td>
</tr>
<tr>
<td style="text-align:center;">Rate 02</td>
<td style="background:#FFF;color:#000;text-align:center;">10 / 100</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>我想根据面板标题颜色为每个表格“avactr”类应用不同的样式，我尝试应用第一个表格，例如，使用以下代码：
#avs4 :nth-child(1) table.avactr tbody tr:nth-child(1) td:first-child {
background: #047AB7;
color: #FFF;
}
#avs4 :nth-child(1) table.avactr tbody tr:nth-child(2) td:first-child {
background: #047AB7;
color: #FFF;
}
#avs4 :nth-child(1) table.avactr tbody tr:nth-child(3) td:first-child {
background: #047AB7;
color: #FFF;
}
但它不起作用，我该如何解决它？
【问题讨论】：
标签： javascript html css