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

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>.这是更新的jsFiddle

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

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

什么,做的是.highlighted适用于第一个,以及.highlighted ~ .highlighted适用于一切,但第一个