css - 如何在混合容器中选择类(class)的第一个 child /最后一个 child ？

Question

我可以在包含不同类(class) child 的 div 中选择类(class)的第一个和最后一个 child 吗？

例如:

<div class="main">
    <div class="red"></div>
    <div class="red"></div>
    <div class="red"></div>

    <div class="black"></div>
    <div class="black"></div>
    <div class="black"></div>

    <div class="green"></div>
    <div class="green"></div>
    <div class="green"></div>
</div>

我想选择 .black 的第一个 child 和最后一个 child 。这可能吗？

Answer 1

不，不幸的是不是。

但是，可以通过组合两个选择器 ( example ) 来选择某个类的第一个子节点:

div.black:first-child,
div:not(.black) + div.black

第一个选择器选择一个黑色 div，它显然是其父项的第一个子项。第二个选择器选择前面有一个非黑色 div 的黑色 div。使用这两个规则，您可以选择第一个黑色 div。

有关详细信息，请参阅::first-child , :not , 和 adjacent sibling selector (+) .