Question

我有一个表格，其中突出显示某些行。我希望突出显示的行的第一行有一个应用于其顶部的边框。

我正在尝试以下方法，但它无效。

.highlighted{
 background-color: lightyellow;
}
table:first-child tr.highlighted td{
    border-top: solid 1px gray;
}

这是一个小提琴。

http://jsfiddle.net/k2ky6/

我遇到的问题是边框会添加到每个突出显示的行，而不仅仅是第一行。

纯css有可能吗？

Answer 1

您可以使用选择器.highlighted ~ .highlighted执行此操作，并将display:block应用于<tr>。 Here是更新的jsFiddle

.highlighted {
    display:block;
    border-top:1px solid lightgrey;
    background-color:lightyellow;

}
.highlighted ~ .highlighted {
    border:0;
}

这样做是.highlighted适用于第一个，.highlighted ~ .highlighted适用于所有但适用于第一个

Answer 2

:first-child伪选择器是关于父元素的第一个子元素。如果您的<TR>个孩子都是一个共同<TABLE>的孩子，那么tr:first-child仅适用于表格中的第一行。

您实际撰写的内容 - table:first-child - 适用于<TABLE>元素，这些元素是其特定父级的第一个子级（例如<TABLE>中的第一个<DIV>）。

如果可能的话，你可以通过将每组突出显示的单元格放在<TBODY>中来获得一些工作 - 因为<TR>确实是<TBODY>的第一个孩子。

据我所知，你真正要求的是 - 首先<TR>使用特定的类 - 在纯CSS中根本不可能，甚至不能使用新的CSS3选择器。

Answer 3

此.highlighted ~ .highlighted是否有好处/差异？

...而不是仅为第一个突出显示的样式创建样式，例如

.highlighted{
    background-color: lightyellow;
}
.highlighted-2 td{
    border-top: solid 1px gray;
    background-color: lightyellow;
}

如何使用纯CSS将样式应用于表的第一行（匹配类）？

3 个答案: