如何在混合容器中选择班级的第一个孩子/最后一个孩子？

Question

我可以在一个有不同类别孩子的div中选择一个班级的第一个和最后一个孩子吗？

例如:

<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.那可能吗？

Answer 1

使用nth-child或nth-of-type与类选择器结合使用。

实例

.main .black:nth-child(2n) {
    color: yellow;
}

或者如果您希望它们分开

这个演示

.main .black:nth-child(5n - 6) {
    color: yellow;
}
.main .black:nth-child(5n - 4) {
    color:purple;
}

该函数使用 进行计算n = element of type，因此:nth-child(n)将选择每个元素、:nth-child(2n)选择所有奇数元素、:nth-child(2n-1)选择所有偶数元素，依此类推。你只需要想出一个函数来获取你想要的元素

另一种选择可能是将另一个类添加到类的第一个和/或最后一个元素

您可以通过组合两个选择器（如乔纳森所说）（我个人更喜欢）来选择具有动态数量的元素的第一个子级div:not(.black) + div.black。然而，在没有前一个同级选择器的情况下，选择具有动态数量元素的类的最后一个元素的唯一方法是使用 Javascript 或像 jQuery 这样的库，如下所示：

JavaScript

var blackElems = document.getElementsByClassName('black');
blackElems[blackElems.length - 1].style.color = 'purple';

jQuery

$('.main .black:last').css({ 'color' : 'purple' });