logo标签列表

使用CSS样式来为最后一个类型的行设置样式

htmlcsscss-selectors
3

我有一个问题。我有一个像下面这样的表格

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

我正在尝试在最后一个 .unread 上使用 tr.unread:last-of-type 添加 border-bottom，但似乎无法生效。
我正在寻求一种纯CSS解决方案，因为未读/已读行的数量是动态更改的，我无法访问代码。
如果你问我为什么，我会说因为CSS伪类中没有一个是通过查看类列表来匹配.class，而是通过父元素的子树来匹配有效的元素。 - Hashem Qolami
但是关于纯CSS解决方案，恐怕目前还无法实现。至少目前是这样。 - Hashem Qolami
1个回答
2
也许可以换个角度来看：你可以在第一个 .read 行上加一个 top 边框，以达到相同的效果。
.unread + .read td {border-top: 1px solid red;}

Demo

我曾经发布过（然后删除了）一个类似的解决方案，但这个用例被提出来作为批评：http://jsfiddle.net/634mdLg3/2/。 - David Thomas
我不确定你的意思。在我看来，这似乎是一个有效的解决方案！我只会支持我的版本，因为它可以在更多的浏览器中运行（不依赖于“：not”）。 - ralph.m
@David Thomas：问题有点不清楚。如果您想要最后一个未读邮件，无论它在哪里，那么该批评是正确的。如果您想要每当行在已读和未读之间变化时所发生的情况（即该类型“块”中的最后一行），那么您只需要为.read类添加一个相似的规则即可。（请参见http://jsfiddle.net/nz7oh2dd/）。实际上，我猜测这些行已经排序了 :) - Adam
OP想要为最后一个.unread消息设置样式，但在该演示中，最后一个.unread消息并不在您认为的位置。@adam：可能是这样，但您的假设似乎不合理，因为它假定了任何平均邮件/消息客户端的性质。 - David Thomas
问题的表述似乎暗示着.unread行总是出现在.read行之前（尽管不知道每种类型会有多少行）。如果不是这种情况，那么这个解决方案就行不通了——尽管我会责怪问题没有表述得足够清楚。 - ralph.m
@DavidThomas：是的 - 我认为你和这个答案都是有效的，但要注意你需要先假设行已经排序（如示例所示）。如果你实际上想要最后一个这样的行，你需要在服务器端添加额外的类或使用JavaScript。 - Adam
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接