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

Question

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

我有一张这样的桌子：

<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标签有. 但不是第二排。trvertical-align

.category_table td{
    vertical-align:top;
}

Answer 1

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

Answer 2

这应该做的工作：

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

Answer 3

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

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

这适用于第一个tr和thead两者tbody：

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