Question

在我的应用程序中，我有一个超过7 tr和3 td的表。对于特定的媒体，我想改变我的td的一个colspan。为此我现在使用tr的类名称为特定的tr添加一个类名，我想找到那个tr的第一个和最后一个孩子。这该怎么做？ 不使用任何脚本（jquery / java）。我想只用css做这个。

 <table cellspacing="0" cellpadding="0" border="0" style="border- collapse: collapse; width:100%; table-layout:fixed;">
    <tbody>
    <tr>
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
    </tr>
   <tr>
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
    </tr>
     <tr>
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
    </tr>
    <tr class="media">
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
     </tr>
      </tbody>
   </table>

Answer 1

只需做下面的事情。

＆＃13;

.media td:first-of-type {
  background: red;
  }

.media td:last-of-type {
  background: green;
  }

＆＃13;

<table cellspacing="0" cellpadding="0" border="0" style="border- collapse: collapse; width:100%; table-layout:fixed;">
    <tbody>
    <tr>
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
    </tr>
   <tr>
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
    </tr>
     <tr>
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
    </tr>
    <tr class="media">
    <td>some content</td>
    <td>some content</td>
    <td>some content</td>
     </tr>
      </tbody>
   </table>

＆＃13;

注意：如果它们的样式相同，您可以将它们添加到一起，如下所示。

 .media td:last-of-type, .media td:first-of-type {
      background: green;
      }

Answer 2

你可以这样做：

.media td:first-child,.media td:last-child{
        background-color: red;
    }

如果您想在.media中选择某个td，可以使用

//n is the td you want select. n starts from 1
.media td:nth-child(n) {
  background-color: red;
}

Answer 3

纯JavaScript代码。

document.getElementsByClassName("class-name").childNodes[0]; //first element

document.getElementsByClassName("class-name").childNodes[2]; //last element

对于CSS：

.media是特定tr的类。如果您使用tr的不同类，那么您可以重用下面具有不同类名的代码。

  .media td:first-child{
background-color:red;
}

.media td:last-child{
background-color:red;
}

更多增强功能，如果您使用不同的类名，例如media-1，media-2用于不同的TR：

tr[class^="media-"] td:first-child{
background-color:red;
}

tr[class^="media-"] td:last-child{
background-color:red;
}

Answer 4

这是......

table .media:first-child,
.media:last-child{
    background-color:red;
}

Answer 5

试试这个

table tr.media td:first-child{}

table tr.media td:last-child{}

如何在CSS中使用tr类名找到tr中的第一个td？

5 个答案: