将 CSS 样式仅应用于表格的第一行。

Question

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

- Rokas Paškevičius

---

为什么你不能只使用 #right .head td:first-child {...}？ - Novocaine

Answer 1

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

- Ganesh Pandhere

Answer 2

您可以通过以下方式进一步进行。

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

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

- Daniel

Answer 3

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

例如：

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

- q0re

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

- Irfan TahirKheli