将样式应用于第一行的单元格


79

它应该很简单,但我无法弄清楚。

我有这样一张桌子:

<table class="category_table">
 <tr><td> blabla 1</td><td> blabla 2 </td></tr>
 <tr><td> blabla 3 </td><td> blabla 4 </td></tr>
</table>

我想使td第一tr行的标签具有vertical-align。但不是第二行。

.category_table td{
    vertical-align:top;
}


是的,我在问一个问题之前已经看过该页面,它没有用。
xperator 2012年

Answers:


172

用于tr:first-child第一个tr

.category_table tr:first-child td {
    vertical-align: top;
}

如果您有嵌套表,并且不想将样式应用于内部行,请添加一些子选择器,以便只有td第一个顶层的顶层str才能获得样式:

.category_table > tbody > tr:first-child > td {
    vertical-align: top;
}

实际上,我之前曾尝试过此方法,但无法正常工作。不知道为什么。
xperator 2012年

1
我也不知道 我有100%的信心,这适用于所有主要浏览器。
BoltClock

td在FireBug中比较第一行和第二行的标签时,可以看到第一行继承了样式,而第二行则没有。我不知道为什么第二行是垂直对齐的!
xperator 2012年

那么这可能是默认样式。我不熟悉默认的表格样式。
BoltClock

我对FireBug有了更深入的了解。我想我找到了问题。实际上,在td第二行的标签中,我在那里有桌子。似乎第二行的单元格内的表继承了样式。
xperator 2012年

3

这应该做的工作:

.category_table tr:first-child td {
    vertical-align: top;
}

0

下面适用于tr下表中的第一个thead

table thead tr:first-child {
   background: #f2f2f2;
}

这适用于第一trtheadtbody两个:

table thead tbody tr:first-child {
   background: #f2f2f2;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.