Question

我有一个问题。我有一个类似下面的表

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

我正在尝试使用border-bottom在最后 .unread上添加tr.unread:last-of-type，但似乎无法正常工作。

我正在寻找纯CSS解决方案，因为未读/读取行的数量会动态更改，并且无法访问代码。

Answer 1

也许以不同的方式看待它：您可以通过在第一个.read行上放置顶部边框来获得相同的结果：

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

Demo

使用CSS样式行的最后一行

1 个答案: