Question

我在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;
}

但它不起作用，我该如何解决？

Answer 1

css伪类For y=0 to DataGridView1.Rows.Count-1 'Loops trough rows If Combobox1.Items.Contains(DataGridView1(0,y).Value.ToString()) Then 'Checks if combobox has something named the same way as cell Msgbox("they are the same value") End If Next仅在自身悬空时不起作用，但是如果象{{1 }}。

:nth-child(1)

.panel:nth-child(1)

将CSS不同的样式应用于Bootstrap手风琴中的表格

1 个答案: