在另一个第n子元素中使用第n子元素

Question

<table>
<tr>
<th>heading a</th>
<th>heading b</th>
<th>heading c</th>
</tr>
<tbody>
<tr>
<td>Blue</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>White</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>Blue</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</tbody>
</table>

上面的是这个问题的示例表。首先给出一些上下文，我想创建一个第一列被冻结的表。我通过选择tr的第一个子td并将位置设置为绝对并在左侧添加填充来做到这一点。因此，我用来更改每隔一行的背景颜色的css在第一列中不可用。现在我想给td的所有其他第一个子元素添加背景色所以我尝试

td {
&:first-child {
position:absolute;
left:0;
&:nth-child(even){
background-color: blue;
}
}
}

，但这仍然选择所有的前td元素。

我的问题是为什么这会显示出这样的行为，是否有一种方法来选择我想要的元素?

Answer 1

我有点困惑，但这是你想要的吗?

td:first-child {
position:absolute;
left:0;
}
tr:nth-child(even){
background-color: blue;
}

<table>
<tr>
<th>heading a</th>
<th>heading b</th>
<th>heading c</th>
</tr>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</tbody>
</table>

Answer 2

我觉得这是你想要的?

tr:nth-child(odd) td:first-child {
position:absolute;
left:0;
background-color:blue;
}

<table>
<tr>
<th>heading a</th>
<th>heading b</th>
<th>heading c</th>
</tr>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</tbody>
</table>

td:first-child {
position:absolute;
left:0;
}
tr td:not(:first-child){
background-color: blue;
}

<table>
<tr>
<th>heading a</th>
<th>heading b</th>
<th>heading c</th>
</tr>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</tbody>
</table>