Question

我想使用css3 nth-child来选择基于其整个文档中索引的匹配元素（如jquery：eq（）选择器），而不是基于父元素。

<div id="container">
   <div class="result">
      <div class="active">content 1</div>
   </div>

   <div class="result">
      <div class="active">content 2</div>
   </div>

   <div class="result">
      <div class="active">content 2</div>
   </div>
</div>

此css代码选择所有元素，因为每个.active都是与父.result相对应的第一个子元素

.active:nth-child(1) {
    background: red;
}

我还尝试将身体作为父母

body > .active:nth-child(1) {
    background: red;
}

但它无法胜任。

我希望nth-child（1）选择内容1 和nth-child（2）选择内容2

Answer 1

我想你想在.result上使用nth-child。

#container .result:nth-child(1) .active {
  background: red;
}

JSBin

基于元素索引的nth-child

1 个答案: