如何选择具有匹配类的表的最后一行？

Question

我想基于最后一行在表上放置一个分隔符来创建一个类。表行是按此类排序的，因此将分隔符放在最后一行上以获得该类是有意义的。我似乎无法为此确定css。

这是我的例子： http://jsfiddle.net/kruser/cr9hLg9r/

示例css

tbody>tr>td {
    border-bottom: 2px solid #eee;
}

tbody>tr.boy:last-of-type>td {
    border-bottom: 2px solid #000;
}

Answer 1

好的，所以我之前的回答是错误的，但我有另一个想法。你可以使用这样一个简单的技巧：

table {
    border-collapse:collapse
}

tr {
    border-top: 2px solid #eee;
}

.girl {
    border-bottom: 2px solid #eee;
    border-top: 2px solid black;
}

演示：http://jsfiddle.net/6ceom4u6/

修改

好的，我有另一个解决方案：

table {
    border-collapse:collapse
    border-bottom: 2px solid #eee;
}

tr {
    border-top: 2px solid #eee;
}

.boy + :not(.boy),
.girl + :not(.girl),
... {
    border-top: 2px solid black;
}

演示：http://jsfiddle.net/6ceom4u6/4/

Answer 2

CSS没有:last-of-other-combination-of-selectors选择器，因此您无法使用纯CSS执行此操作。

听起来你最好限制标记将tr元素包装在显式tbody元素中，然后将边框放在tbody周围。