Question

我有相同ID但信息不同的表，这是一个例子：

<html>
  <body>
    <div id="avs">
    <table id="av"><tr><td>User 01</td><td>Paola</td></tr></table>
    <table id="av"><tr><td>User 02</td><td>Roger</td></tr></table>
    <table id="av"><tr><td>User 03</td><td>Jenny</td></tr></table>
    </div>
  </body>
</html>

我想在每个表的第一个单元格中应用不同的背景颜色，所以我想知道是否可以为这种情况应用不同的CSS样式。我试过这个，但它不起作用：

#avs table#av:nth-child(1) tbody tr:nth-child(1) td:first-child{
   background: #047AB7;
}

#avs table#av:nth-child(2) tbody tr:nth-child(1) td:first-child{
   background: #FF0;
}

#avs table#av:nth-child(3) tbody tr:nth-child(1) td:first-child{
   background: #abdd8c;
}

我想要一些帮助。

更新

我申请了@Sébastién解决方案，但它没有用，这是我的完整代码，我做错了什么？

<div id="avs">
  <div class="panel-group" id="avancesacor" 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="heading3" 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="#avancesacor" href="#collapse3" aria-expanded="false" aria-controls="collapse3">Avance</a>
              </td>
              <td style="background:#FFF;text-align:center;">test test (2018-02-23 10:44:00)</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3" aria-expanded="false" style="height: 0px;">
        <div class="panel-body" style="padding:0px;">
          <table class="table" id="avactr" style="margin-bottom:0px;">
            <tbody>
              <tr>
                <td style="width:50%;text-align:center;">Archivos</td>
                <td style="background:#FFF;color:#000;text-align:center;">
                  <a target="_blank" href="https://cdn.filestackcontent.com/SWG0LWmS068erKEEYbaO">
                    <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-prueba2.docx</button>
                  </a>
                </td>
              </tr>
              <tr>
                <td style="text-align:center;">Páginas traducidas</td>
                <td style="background:#FFF;color:#000;text-align:center;">1 / 2</td>
              </tr>
              <tr>
                <td style="text-align:center;">Palabras traducidas</td>
                <td style="background:#FFF;color:#000;text-align:center;">85 / 173</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="heading2" 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="#avancesacor" href="#collapse2" aria-expanded="false" aria-controls="collapse2">Avance</a>
              </td>
              <td style="background:#FFF;text-align:center;">Soledad Lorena Montoya Samamé (2018-02-23 09:34:00)</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2" aria-expanded="false" style="height: 0px;">
        <div class="panel-body" style="padding:0px;">
          <table class="table" id="avactr" style="margin-bottom:0px;">
            <tbody>
              <tr>
                <td style="width:50%;text-align:center;">Archivos</td>
                <td style="background:#FFF;color:#000;text-align:center;">
                  <a target="_blank" href="https://cdn.filestackcontent.com/qgkiH6tcQfeJLxvHEnsA">
                    <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;">Páginas traducidas</td>
                <td style="background:#FFF;color:#000;text-align:center;">1 / 5</td>
              </tr>
              <tr>
                <td style="text-align:center;">Palabras traducidas</td>
                <td style="background:#FFF;color:#000;text-align:center;">26 / 850</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

HTML中的

IDs必须在给定文档中是唯一的。但是类可以多次使用。

只需在表格中使用类而不是ID：

#avs table.av:nth-child(1) tbody tr:nth-child(1) td:first-child{
   background: #047AB7;
}

#avs table.av:nth-child(2) tbody tr:nth-child(1) td:first-child{
   background: #FF0;
}

#avs table.av:nth-child(3) tbody tr:nth-child(1) td:first-child{
   background: #abdd8c;
}

<html>
  <body>
    <div id="avs">
    <table class="av"><tr><td>User 01</td><td>Paola</td></tr></table>
    <table class="av"><tr><td>User 02</td><td>Roger</td></tr></table>
    <table class="av"><tr><td>User 03</td><td>Jenny</td></tr></table>
    </div>
  </body>
</html>

这是对您更新的问题的回应：

#avs :nth-child(1) tbody tr:nth-child(1) td:first-child {
  background: #f90;
}

#avs :nth-child(2) tbody tr:nth-child(1) td:first-child {
  background: #0f9;
}

#avs :nth-child(3) tbody tr:nth-child(1) td:first-child {
  background: #abdd8c;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="avs">
  <div class="panel-group" id="avancesacor" 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="heading3" 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="#avancesacor" href="#collapse3" aria-expanded="false" aria-controls="collapse3">Avance</a>
              </td>
              <td style="background:#FFF;text-align:center;">test test (2018-02-23 10:44:00)</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3" aria-expanded="false" style="height: 0px;">
        <div class="panel-body" style="padding:0px;">
          <table class="table" id="avactr" style="margin-bottom:0px;">
            <tbody>
              <tr>
                <td style="width:50%;text-align:center;">Archivos</td>
                <td style="background:#FFF;color:#000;text-align:center;"><a target="_blank" href="https://cdn.filestackcontent.com/SWG0LWmS068erKEEYbaO"><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-prueba2.docx</button></a></td>
              </tr>
              <tr>
                <td style="text-align:center;">Páginas traducidas</td>
                <td style="background:#FFF;color:#000;text-align:center;">1 / 2</td>
              </tr>
              <tr>
                <td style="text-align:center;">Palabras traducidas</td>
                <td style="background:#FFF;color:#000;text-align:center;">85 / 173</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="heading2" 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="#avancesacor" href="#collapse2" aria-expanded="false" aria-controls="collapse2">Avance</a>
              </td>
              <td style="background:#FFF;text-align:center;">Soledad Lorena Montoya Samamé (2018-02-23 09:34:00)</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2" aria-expanded="false" style="height: 0px;">
        <div class="panel-body" style="padding:0px;">
          <table class="table" id="avactr" style="margin-bottom:0px;">
            <tbody>
              <tr>
                <td style="width:50%;text-align:center;">Archivos</td>
                <td style="background:#FFF;color:#000;text-align:center;"><a target="_blank" href="https://cdn.filestackcontent.com/qgkiH6tcQfeJLxvHEnsA"><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;">Páginas traducidas</td>
                <td style="background:#FFF;color:#000;text-align:center;">1 / 5</td>
              </tr>
              <tr>
                <td style="text-align:center;">Palabras traducidas</td>
                <td style="background:#FFF;color:#000;text-align:center;">26 / 850</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您应该使用唯一ID

  #avs:first-of-type {
      background: red;
  }

  #avs:first-of-type {
      background: red;
  }

  #avs:nth-of-type(2) {
      background: yellow;
  }

  #avs:nth-of-type(3) {
      background: blue;
  }

用于访问孩子的广告，您可以使用nth-of-type选择器，例如：

cubed, 32001.00

应用具有相同ID的不同CSS样式的表

2 个答案: