css - 如何使用纯 css 将样式仅应用于表格的第一行(匹配类)?

标签 css css-selectors

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

我正在尝试以下方法,但它不起作用。

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

这是一个 fiddle 。

http://jsfiddle.net/k2ky6/

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

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

相关文章:

javascript - 响应式设计 - 宽表

html - Bootstrap Glyphicons 未在 Firefox 中显示,但在 Chrome 中显示

javascript - 你如何找到伪元素的坐标?

html - 我应该多久在 CSS 中使用子/兄弟选择器?

html - 强制桌面浏览器显示网站的移动版本

html - 使用边框会导致与 Bootstrap 3 的错误对齐

html - 什么是怪癖模式?

python-3.x - 通过href属性的一部分查找元素

CSS:如何选择 parent 的 sibling

css - 是否有 CSS 父级选择器?