CSS选择具有类的第一行[重复]答案

【问题标题】：CSS Select First Row With Class [duplicate]CSS选择具有类的第一行[重复]
【发布时间】：2018-03-16 08:28:11
【问题描述】：

我有这样的行：

<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 队的队长）。这种选择器可以吗？

【问题讨论】：

有考虑使用“类”属性吗？只为船长标签设置一个类，例如“船长”，而不是使用选择器无法做到的选择器
jsfiddle.net/kjwovpyr/1

标签： css

【解决方案1】：

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

HTML

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

CSS

.captain{.....}

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

【讨论】：

【解决方案2】：

你必须倒着做，见this answer for more info。基本上将所有这些类设置为 highlight 颜色，然后进一步向下查看 DOM 并将任何后续的兄弟类重置为 default。

另外，您应该将td 元素放在您的表格中：

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

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

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

【讨论】：

表格中有<td>元素，为了简化，我只是删除了它们。真正的行要大得多。谢谢你的绝招！