Html 使用CSS设置最后一行的样式

我有个问题。我有一张和下面一样的桌子

<table>
    <tbody>
        <tr class="unread"><td>Message</td></tr>
        <tr class="unread"><td>Message</td></tr>
        <tr class="unread"><td>Message</td></tr>
        <tr class="read"><td>Message</td></tr>
        <tr class="read"><td>Message</td></tr>
        <tr class="read"><td>Message</td></tr>
        <tr class="read"><td>Message</td></tr>
    </tbody>
</table>

消息
消息
消息
消息
消息
消息
消息

我试图在最后一个

上添加一个
边框底部
。未读

和

tr。未读：最后一个类型

，但似乎不起作用

---

我正在寻找一个纯CSS解决方案，因为未读/已读行的数量是动态变化的，并且无法访问代码。

也许可以换一种方式来看待它：在第一行

上加一个上边框，可以得到相同的结果。读取

行：

.unread + .read td {border-top: 1px solid red;}

---

如果你问我为什么，我会说，因为没有一个CSS伪类通过类列表来匹配

.class

，而是通过父级的子级树来匹配有效元素。但是关于纯CSS解决方案，我恐怕不可能做到这一点。至少目前是这样。我发布了（然后删除了）一个类似的解决方案，但这个用例作为一个批评被提供：我不知道你的意思。对我来说似乎是一个有效的解决办法！我只会喜欢我的版本，因为它可以在更多的浏览器中工作（不依赖于

：而不是
）。@David Thomas:这个问题有点不清楚。如果你想要最后一个。未读的，无论在哪里，那批评都是有效的。如果您希望在读取和不死（即类型的最后一个“块”）之间更改该行，那么您只需要为.read类添加一个类似的规则。（见附件）。实际上，我猜行已经排序：）OP想要设置最后一条
。未读
消息的样式，最后一条
。未读
消息不是您认为它在演示中的位置@亚当：可能吧，但你的假设似乎不合理，假设任何普通邮件/消息客户端的性质。这个问题的提出方式似乎意味着
.unread
行总是在
.read
行之前（尽管不知道每个行有多少行）。如果不是这样的话，那么这个解决方案就行不通了，尽管我会责怪这个问题不够清楚。