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

【问题标题】：Set css style only to first row of the table仅将 css 样式设置为表格的第一行
【发布时间】：2013-09-17 22:43:53
【问题描述】：

如何使用 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

【问题讨论】：

你为什么不能直接使用#right .head td:first-child {...}

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以做的更进一步。

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

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

【讨论】：

【解决方案3】：

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

喜欢：

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

【讨论】：

【解决方案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;
}

【讨论】：