WordPress循环中的nth-child？

Question

我试图找出如何使用nth-child来创建div的所有其他实例＆＃34; mask＆＃34;换颜色。我有一个模板代码在页面上反复循环。这是：

<div class="view">  
     <?php echo get_the_post_thumbnail( $post->ID, 'clip-thumb' ); ?>  
     <div class="mask">  
        <h2><?php the_title(); ?></h2>  
        <p>Your Text</p>  
        <a href="#" class="info">Read More</a>  
     </div>  
</div> 

我希望所有奇数实例都是一种颜色，所有偶数实例都是另一种颜色。这是我希望能够运作的代码：

.view .mask {
    width: 326px;
    height: 280px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}

.view .mask:nth-child(odd) {
    background-color: rgba(235,167,32, 0.7);
}

.view .mask:nth-child(even) {
    background-color: rgba(4,141,195, 0.7);
}

最终发生的事情是，所有面具都会变成一种背景颜色（均匀的颜色）。这可以在这里看到：http://noellesnotes.com/portfolio/seventeen/

任何方向都会非常感谢！

Answer 1

您的.mask元素中的每个均为，在其父级（.view）范围内：

<!-- First Child (odd) -->
<div class="view">  
     <!-- First Child (odd) -->
     <?php echo get_the_post_thumbnail( $post->ID, 'clip-thumb' ); ?>  

     <!-- Second Child (even) -->
     <div class="mask">  
        <h2><?php the_title(); ?></h2>  
        <p>Your Text</p>  
        <a href="#" class="info">Read More</a>  
     </div>  
</div> 

<!-- Second Child (even) -->
<div class="view">  
     <!-- First Child (odd) -->
     <?php echo get_the_post_thumbnail( $post->ID, 'clip-thumb' ); ?>  

     <!-- Second Child (even) -->
     <div class="mask">  
        <h2><?php the_title(); ?></h2>  
        <p>Your Text</p>  
        <a href="#" class="info">Read More</a>  
     </div>  
</div> 

要实现您的目标，请更改以下内容：

.view .mask:nth-child(odd) {
    background-color: rgba(235,167,32, 0.7);
}

.view .mask:nth-child(even) {
    background-color: rgba(4,141,195, 0.7);
}

要：

.view:nth-child(odd) .mask {
    background-color: rgba(235,167,32, 0.7);
}

.view:nth-child(even) .mask {
    background-color: rgba(4,141,195, 0.7);
}