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

应该很简单，但我想不出来。

我有一张这样的桌子:

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

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

.category_table td{
vertical-align:top;
}

202737 次浏览

小开

最佳答案

Use tr:first-child to take the first tr:

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

If you have nested tables, and you don't want to apply styles to the inner rows, add some child selectors so only the top-level tds in the first top-level tr get the styles:

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

小开

This should do the work:

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

小开

Below works for first tr of the table under thead

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

And this works for the first tr of thead and tbody both:

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