每个家长的每一个其他孩子的目标

Question

我一直在努力争取一段时间，现在是时候寻求帮助。 我有这样的：

<div class="news-images"> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect"></div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect"></div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect"></div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect"></div> 
 
    </div> 
 
    </div> 
 
</div>

我想针对所有其他（一2N + 1，奇/偶之类的话）的 “效果” 类的实例。这是可能的纯CSS或我需要一些JavaScript？

谢谢！

Answer 1

你想要这个吗？如果不是，请简要解释。

.col-md-12:nth-child(odd) .effect{ 
 
    background: black; 
 
    color: #fff; 
 
} 
 
.col-md-12:nth-child(even) .effect{ 
 
    background: blue; 
 
    color: #fff; 
 
}

<div class="news-images"> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect">hello world!</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect">hello world!</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect">hello world!</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect">hello world!</div> 
 
    </div> 
 
    </div> 
 
</div>