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

不，不幸的是没有。

但是，通过组合两个选择器（ example ），可以选择某个班级的第一个孩子：

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

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

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

Answer 2

将nth-child或nth-of-type与班级选择器结合使用。

Live Example

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

或者如果你想让它们分开

This demo

.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)选择所有偶数元素，依此类推。你只需要提出一个能够获得你想要的元素的函数

另一个选项可能是将另一个类添加到类

的第一个和/或最后一个元素

你可以通过组合两个选择器来选择具有动态数量的元素的第一个孩子，如Jonathan所说（我个人更喜欢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' });

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

2 个答案: