我有一个表格,其中突出显示了某些行。我希望突出显示行的第一行在其顶部应用边框。
我正在尝试以下方法,但它不起作用。
.highlighted{
background-color: lightyellow;
}
table:first-child tr.highlighted td{
border-top: solid 1px gray;
}
这是一个 fiddle 。
我遇到的问题是边框被添加到每个突出显示的行,而不仅仅是第一行。
纯 css 可以吗?
最佳答案
你可以这样做,使用选择器 .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
适用于所有但第一个
关于css - 如何使用纯 css 将样式仅应用于表格的第一行(匹配类)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20661603/