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

Question

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

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