html - 仅将 css 样式设置为表格的第一行

Question

如何使用 CSS 访问具有不同tr类名的表的第一行。

<div id="right">
 <table>
 <tbody>
 <tr class="head">
 <td >Date</td><td>Info</td><td>More</td>
 </tr>
<tr><td>...</td></tr></table>
</div>

如何制作这个 CSS

#right table tr:first-child td:first-child {
    border-top-left-radius: 10px; 
}
#right table tr:first-child td:last-child {
    border-top-right-radius: 10px;
}

仅适用于 .head

Answer 1

#right .head td:first-child{
    border-top-left-radius: 10px; 
}
#right .head td:last-child {
    border-top-right-radius: 10px;
}

Answer 2

你可以通过做更进一步。

#right tr:first-child td:first-child {
    background-color: red;
}

选择第一个 tr，然后选择第一个 td。

Answer 3

使用伪类:first-child获取第一个元素。

喜欢：

#right .head td:first-child {
    border-top-left-radius: 10px; 
}
#right .head td:last-child {
    border-top-right-radius: 10px;
}

Answer 4

#right table tr.head td:first-child {
    border-top-left-radius: 10px; 
}
#right table tr.head td:last-child {
    border-top-right-radius: 10px;
}