Question

我有这样的行：

<tr class="team_2">Team Member</tr>
<tr class="team_2">Team Member</tr>
<tr class="team_1">Team Member</tr>
<tr class="team_2">Team Member</tr>
<tr class="team_1">Team Member</tr>

我想强调团队队长的每个团队的第一个成员。我试过这个：

table tbody tr.team_2:first-of-type, table tbody tr.team_1:first-of-type {
background: red;
}

这突出显示了第一行，但没有突出显示第三行（团队1的队长）。这种选择器是否可行？

Answer 1

您必须向后执行此操作，请参阅this answer for more info。基本上将所有这些类设置为突出显示颜色，然后您进一步查看DOM并将所有后续兄弟类重置为默认。

此外，您应该在表格中添加td元素：

＆＃13;

.team_2, .team_1 {
  background-color: red;
}

.team_1 ~ .team_1 {
  background-color: transparent;
}
.team_2 ~ .team_2 {
  background-color: transparent;
}

＆＃13;

<table>
<tr class="team_2"><td>Team Member</td></tr>
<tr class="team_2"><td>Team Member</td></tr>
<tr class="team_1"><td>Team Member</td></tr>
<tr class="team_2"><td>Team Member</td></tr>
<tr class="team_1"><td>Team Member</td></tr>
</table>

＆＃13;

Answer 2

理想情况下，您只需向团队成员添加一个类并定位该特定类。

<强> HTML

cmp rdx,0
cmovg rax,rcx

<强> CSS

<tr class="team_2">
 <td class="captain">Team Member</td>
</tr>
<tr class="team_1">
 <td>Team Member</td>
</tr>
<tr class="team_1">
 <td class="captain">Team Member</td>
</tr>
<tr class="team_2">
 <td>Team Member</td>
</tr>

编辑：我编辑了我的答案，因为Ben给出的答案更符合您的问题。

CSS选择带有类的第一行

2 个答案: