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

在我的应用程序中，我有一个表，每个表中包含超过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>

一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容

用于纯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;
}

如果您为不同的TR使用不同的类名，如media-1、media-2，则会有更多增强功能：

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

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

---

只要做下面这样的事情

.media td:类型的第一个{
背景：红色；
}
.media td:类型的最后一个{
背景：绿色；
}

一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容

在这里

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

试试这个

table tr.media td:first-child{}

table tr.media td:last-child{}

您可以这样做：

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

---

OP不是在寻找JS解决方案。我道歉。我没看到。将发布CSS解决方案。仍然不正确-您的类选择器放错了位置。在这里您可以看到输出。****哇，七个答案，其中一半以上都错了。这是一个重复的问题，但我几乎想亲自发布一个答案来解释为什么其他人有一半是错的，即使这与手头的问题无关。你仍然需要在逗号后重复

.media

部分。我已经更正了它。谢谢