Question

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

HTML

<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>')
}

JSFiddle

Answer 1

如果您想选择.test div，则需要选择#main的每个偶数孩子，然后选择其中的.test。

<强> CSS

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

<强> JSFiddle

Answer 2

由于html中有两种不同的结构，请使用不同的选择器进行样式设置

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

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

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

2 个答案: