嵌套表中父表的 CSS 样式优先<td>

Question

我试图只向父表的第一个td元素添加一些css样式，但如果我使用td:first-child {width: 18%;}，它也会首先应用于子表td。那么，有没有css选择器可以只选择父表？

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
td:first-child {
width: 18%;
color: red;
}

<table>
<tr>
<td>
<label>Parent first td</label>
</td>
<td>
<table>
<tr>
<td>Child first td</td>
<td>Child second td</td>
</tr>
</table>
</td>
</tr>
</table>

Answer 1

您可以为父表分配类名，并使用直接子选择器>，如下所示：

table,th,td {
border: 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}

.parent-table > tbody > tr > td:first-child {
/*                    ^^   ^^     */
/* Means 'first "td" child of first order "tr" children of ".parent-table" */
width: 18%;
background: red;
}

<table class="parent-table">
<tr>
<td>
<label>Parent first td</label>
</td>
<td>
<table>
<tr>
<td>Child first td</td>
<td>Child second td</td>
</tr>
</table>
</td>
</tr>
</table>

Answer 2

只需将任何特定的类(如<tr class="t1">(添加到父表的tr中，然后使用smth，如：

.t1>td:first-child { 
background-color: lime;
}

感谢您的评论。