CSS选择器，如果前一个元素具有不同className的子

Question

有了下表，是否可以为tr:first-child设置一个特定的样式，前一个:first-child的{​​{1}}有不同的类？在示例表中，我想要第2行和第4行的圆角，但不是第5行（因为第4行第一个子节点与第5行第一个子节点相同）。

tr

Answer 1

简答：否

您可以参考 CSS Selectors here 。

长答案：

让我们先简化你的头衔：

我想为一个元素设置样式，但前提是邻居的第一个子元素之前的元素不具有相同的类。

使用javascript可以很容易地实现这一点，但是让我们假装你不能使用javascript ，并且你对你的类声明有一点自由。

你应该做的第一件事是给每个父元素一个唯一的类名（我会选择与子元素相同）。所以在这个例子中它将是<tr class=“a”>，依此类推。

然后我们可以使用您想要的效果为每个:first-child设置样式（在这种情况下，border-radius）。

稍后我们可以使用css选择器来定位每个元素，它们具有相同类名的相邻兄弟（请参阅docs），我们将还原或删除刚放在其上的样式。

此处＆＃39;使用li元素作为 demo ，并在下面的代码段中，您将看到另一个使用table元素的示例。

＆＃13;

＆＃13;

tr {
    color: orange; 
}
tr.a > td.a:first-child,
tr.b > td.b:first-child,
tr.c > td.c:first-child {
    color: aqua; /* style all first-children*/
}
tr.a + tr.a > td.a:first-child,
tr.b + tr.b > td.b:first-child,
tr.c + tr.c > td.c:first-child {
    color: orange; /*revert the styling on select elemets*/
}

＆＃13;

<table>
    <tr class="a">
        <td colspan="2">class-a</td><!--should be styled-->
    </tr>
    <tr class="b">
        <td class="b">class-b</td><!--should be styled-->

        <td class="b">class-b</td>
    </tr>
    <tr class="c">
        <td class="c">class-c</td><!--should be styled-->

        <td class="c">class-c</td>
    </tr>
    <tr class="b">
        <td class="b">class-b</td><!--should be styled-->

        <td class="b">class-b</td>
    </tr>
    <tr class="b">
        <td class="b">class-b</td><!--should NOT be styled-->

        <td class="b">class-b</td>
    </tr>
    <tr class="c">
        <td class="c">class-c</td><!--should be styled-->

        <td class="c">class-c</td>
    </tr>
     <tr class="b">
        <td class="b">class-b</td><!--should be styled-->

        <td class="b">class-b</td>
    </tr>
     <tr class="c">
        <td class="c">class-c</td><!--should be styled-->

        <td class="c">class-c</td>
    </tr>
     <tr class="c">
        <td class="c">class-c</td><!--should NOT be styled-->

        <td class="c">class-c</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;