有没有办法结合css属性选择器和第一个类型选择器并在元素上使用它们[重复]答案

【问题标题】：Is there a way to combine css attribute selectors and first-of-type selectors and use them on a element [duplicate]有没有办法结合css属性选择器和第一个类型选择器并在元素上使用它们[重复]
【发布时间】：2020-07-14 14:32:49
【问题描述】：

我有一张桌子，里面有一堆 tr 元素。其中一些有不同的类别，而另一些则不同。可以说，我有 7 个元素，其中 5 个具有 diff 类名称，其余 2 个具有 diff 类名称，并且元素的位置是随机的。现在我想分别选择 2 个 diff 类名中的元素。我怎么能这样做。

前：

<table>
<tbody>
    <tr class="row"></tr>
    <tr class="grouping-row"></tr>
    <tr class="row"></tr>
    <tr class="row"></tr>
    <tr class="grouping-row"></tr>
    <tr class="row"></tr>
    <tr class="row"></tr>
</table>
</tbody>

在上面的示例中，我想单独选择类名为“grouping-row”的元素并对其应用样式。

这是我尝试过的：

table tbody tr[class="grouping-row"]:first-of-type ，但它不起作用。而且我无法使用 nth-child() 选择它们，因为元素的位置是随机的。

【问题讨论】：

你想将一些css属性应用到类“grouping-row”对吗？您可以在 css 本身中添加相同的内容，对吧.. 这样它就会反映在使用“grouping-row”类的所有元素中..

标签： css css-selectors css-position positioning

【解决方案1】：

试试这个：

.grouping-row { color: red; }
.grouping-row ~ .grouping-row { color: yellow; }

【讨论】：

能否请您简要介绍一下这方面的概念。
检查这个：techbrij.com/css-selector-adjacent-child-sibling。顺便说一句，它有效吗？
这行得通，但是假设我有另一个“分组行”元素，我需要设置不同的样式，使用这个“~”组合器选择所有同级元素，就像我们有 3 个元素一样，它会选择剩下的 2 个兄弟姐妹，但我只想选择一个。
那么在这种情况下，我们必须通过查看元素的模式来制作选择器。如果这不起作用，那么我们需要为该元素添加一个单独的类。
要添加单独的类，我们还需要选择它们吗？

【解决方案2】：

你可以使用这个简单的代码：

table .grouping-row
{
    ...
}

【讨论】：

不，不是那样，我想将特定样式应用于第一个“grouping-row”元素，并将差异样式应用于第二个“grouping-row”元素。
您的答案目前被标记为低质量并面临删除。请确保您的答案包含除任何代码之外的解释。