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

Question

在我的应用程序中，我有一个 table，每个都有超过 7 个 tr 和 3 个 td。对于特定媒体，我想更改我的一个 td 的 colspan。为此，我现在使用 tr 的 class 名称向特定 tr 添加了一个 class 名称，我想找到该 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

纯 javascript 代码。

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

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

对于CSS：

.media 对于特定的 tr 是 class。如果您对 tr 使用不同的 classes，那么您可以使用不同的 class 名称重用下面的代码。

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

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

更多改进，如果您使用不同的 class 名称，如 media-1、media-2 用于不同的 TR：

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

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

Answer 2

只需执行以下操作即可。

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

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

<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>

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

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

Answer 3

这里是....

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

Answer 4

试试这个

table tr.media td:first-child{}

table tr.media td:last-child{}

Answer 5

你可以这样做：

.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;
}

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

How to find a first td in a tr using tr class name in CSS?

html

css

css-selectors