选择高级别选择器的第n个孩子

如何使用不是所述孩子的直接父母的选择器的伪类nth-child？选择高级别选择器的第n个孩子

HTML

<div id="main"> 
</div>

CSS

.test { 
    width: 100px; 
    height: 100px; 
    background: red; 
} 

#main .test:nth-child(even) { 
    background: green; 
}

// doesnt work 
for (var i = 0; i < 3; i++) { 
    $('#main').append('<div><div class="test"></div></div>') 
} 
// works 
for (var i = 0; i < 3; i++) { 
    $('#main').append('<div class="test"></div>') 
}

JSFiddle

来源

2016-08-12 BarryBones41

我知道你应该使用nth类型，如果你想要偶数或奇数，但不知道为什么它不工作。为什么不只是让父div成为背景的呢？ – Omeed

：nth-child（n）选择器匹配它的** parent **的第n个子元素的每个元素。 – Steve

如果你想选择.test DIV，你需要选择每一个连的#main孩子，然后选择.test内。

CSS

#main div:nth-child(even) .test { 
    background: green; 
}

JSFiddle

来源

2016-08-12 20:28:14

这令人沮丧，因为我可以做'#main .test {padding-right：100px; }'选择'＃main'中的所有'.test'，但是我不能用这个类来应用类似的逻辑？ – BarryBones41

不幸的是，没有这样的事情“nth-class-class”，你必须与第n个孩子或第n类型并保持父子结构..只有解决方法是jquery，这不是最好的主意 – Honza

当你有两种不同类型的在你的HTML结构，使用不同的选择器造型

#main .test:nth-child(even) , 
#main div:nth-child(even) > .test{ 
    background: green; 
}

https://jsfiddle.net/9yq0bhjk/4/

来源

2016-08-12 20:36:32 Murtoza

选择高级别选择器的第n个孩子

回答

相关问题