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

我可以选择一个班级的第一个和最后一个孩子，这个孩子有不同班级的孩子吗？如何选择混合容器中的第一个孩子/最后一个孩子？

例如：

<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最后孩子。那可能吗？

来源

2013-10-17 Sami A.

你要选择的第一个。黑的第一个孩子，而最后。黑的最后一个子或每个。黑的第一个和最后一个孩子？ – ohmusama

使用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)选择所有偶数元素，等等上。您只需拿出那得到你想要的元素的功能

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

您可以选择与第一个孩子通过结合像乔纳森所说的两个选择器（我个人更喜欢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-17 00:23:50

这是不可扩展的，如果元素的数量变化 – ohmusama

@ohmusama“你只需要拿出一个函数，让你想要的元素” –

你的建议是有一个动态的css文件，不能被缓存呢？（如果页面上有元素的动态数量） – ohmusama

不，不幸的不是。

但是，可以选择某一类的第一个孩子，通过结合两个选择（example）：

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

中的第一选择，选择一个黑色的DIV这显然是它的第一个孩子家长。第二个选择器选择一个黑色div，前面是非黑色div。使用这两个规则，你可以选择第一个黑色的div。

欲了解更多信息，请参阅：:first-child,:not和adjacent sibling selector (+)。

来源

2013-10-17 00:21:45 Jonathan

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

回答

相关问题