选择高级别选择器的第n个子级
选择高级别选择器的第n个子级
提问于 2016-08-12 20:21:52
如何使用选择器的伪类nth-child，而该选择器不是所述子的直接父级？
<div id="main">
</div>CSS
.test {
width: 100px;
height: 100px;
background: red;
}
#main .test:nth-child(even) {
background: green;
}JS
// 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>')
}回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-12 20:28:14
如果要选择.test div，则需要选择#main的每个偶数子级，然后在其中选择.test。
CSS
#main div:nth-child(even) .test {
background: green;
}Stack Overflow用户
发布于 2016-08-12 20:36:32
由于html中有两种不同的结构，所以使用不同的选择器进行样式设计。
#main .test:nth-child(even) ,
#main div:nth-child(even) > .test{
background: green;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38925917
复制相关文章
相似问题
腾讯云开发者
