5

我可以在具有不同班级的孩子的 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。那可能吗？

4

2 回答 2

4

不，很遗憾没有。

但是，可以通过组合两个选择器（示例）来选择某个类的第一个孩子：

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

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

有关详细信息，请参阅：:first-child、:not和相邻兄弟选择器 ( +)。

于 2013-10-17T00:21:45.727 回答
3

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

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

您可以通过像 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' });
于 2013-10-17T00:23:50.413 回答