定位表中的第一个 TR 类 [重复]答案

【问题标题】：Target first TR class in a table [duplicate]定位表中的第一个 TR 类 [重复]
【发布时间】：2015-10-07 18:13:16
【问题描述】：

我查看了重复的线程，但似乎找不到适合我特定要求的解决方案。

有没有办法可以定位第一个 .future tr 标签？我正在尝试将整行设为红色背景而不影响其他行。

编辑：不是重复的，因为标记的答案不适用于此特定要求。

Edit2：我实际上并没有考虑使用 jquery！谢谢！ :-)

Edit3：一定错过了 Nick Craver 对副本的回答。不过，感谢您在此线程上清楚地提供答案。

【问题讨论】：

唯一的办法就是用javascript
编辑； $(".table tr.future:first")
这是重复的，因为有解释：你不能用 CSS 。答案中的解决方案在 jQuery 中，因为 你不能使用 CSS。你可以保存最后的“你好！” .而且你没有用正确的标签标记
我添加了正确的标签
“不是重复的，因为标记的答案不适用于此特定要求。”你有没有想过除了接受的答案之外可能还有其他答案？

【解决方案1】：

你并不真的需要 JavaScript 来做这样的事情。如果您想要纯 CSS 解决方案，请使用：

tr.future:first-child, tr:not(.future) + tr.future {
    ...
}

:first-child 规则只是为了保护自己，以防第一行是未来行，因为它不会有前一行。

编辑：更新小提琴，因为我只将类放在一个元素上，该元素没有正确证明解决方案的有效性。

【讨论】：

【解决方案2】：

一种纯粹的 CSS 方法是使用子选择器和通用兄弟组合器的组合。

tbody > .future {
    background: red;
}

tbody > .future ~ .future {
    background: none;
}

这样，您可以定位所有具有“future”类的元素，应用红色背景，然后再次从具有“future”类的所有元素中移除背景，这些元素前面有一个也具有“future”类的元素。

这仅留下第一个元素具有红色背景，因为它是唯一一个前面没有同一类元素的元素。

这是一种变通方法，实际上应该这样做，以便 ":first-of-type" 在类上工作，或者我们得到一个 ":first-of-class" 选择器。可惜。

【讨论】：

【解决方案3】：

试试这个

 $("#fixtures tbody tr.future:first td").css("background-color","red");

【讨论】：

【解决方案4】：

您可以使用第一个选择器选择带有“未来”类的 tr。

$("table tr.future:first")

在你的情况下它可以是

$("#fixtures tr.future:first")

【讨论】：