html - 选择高级选择器的第 n 个 child

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