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

【问题标题】：Apply style to cells of first row将样式应用于第一行的单元格
【发布时间】：2012-05-14 01:55:35
【问题描述】：

应该很简单，但我想不通。

我有一张这样的桌子：

<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;
}

【问题讨论】：

【解决方案1】：

以下适用于thead 下表的第一个tr

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

这适用于thead 和tbody 中的第一个tr：

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

【讨论】：

【解决方案2】：

这应该可以完成工作：

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

【讨论】：

【解决方案3】：

用tr:first-child取第一个tr：

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

如果您有嵌套表，并且您不想将样式应用于内部行，请添加一些子选择器，以便只有第一个顶级 tr 中的顶级 tds 获取样式：

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

【讨论】：