php - 向投资组合元素添加一个类以设置每三个元素的样式

Question

我有一个投资组合列表页面，它循环遍历这样的帖子:

<div class="row"> 
    <!-- Loop though projects -->
    <?php 
        $args = array('post_type' => 'project');
        $the_query = new WP_Query( $args );
    ?>
    <?php 
        if (have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>  
            <a href="<?php the_permalink(); ?>">
                <div class="col-sm-6 project-entry">
                    <!--Add thumbnails to potfolio items and resize for responsive-->
                    <?php
                        $thumbnail_id = get_post_thumbnail_id();
                        $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true);
                    ?>
                    <!--Link images and titles to individual portfolio page -->  
                    <p>
                        <img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?> project image">
                    </p>
                    <div class="project-text">   
                        <h4>
                            <?php the_title(); ?> | <?php the_field('project_type_name_'); ?>
                        </h4>
                        <p><?php the_field('brief_description_'); ?></p>
                    </div>
                </div>
            </a>

我需要为第一篇、第二篇和第三篇文章设计样式。我认为最好的方法是为每个投资组合元素添加一个类。

所以添加需要添加:

class-one 到第一、第四等等。

class-two 到第二个，第五个等等。

class-three 到第三、第六等等。

这是最好的方法吗？我该怎么做？

谢谢。

编辑:让我再解释一下。我有一个投资组合列表页面，链接到单个帖子页面。

每个列表都是一个图像(元素条目)，当您在图像上滚动时，文本(元素文本)出现在背景图像的顶部(在原始图像的顶部)。我希望每个第 1、4、7 项的悬停图像相同，每个第 2、5 和 8 项的悬停图像不同，每个第 3、6 和 9 项等的悬停图像不同。

这是正在使用的 CSS，(所以我正在尝试更改这部分:

 background: url('img/project-dark-grey.png');

    .project-entry img {
    width: 100%;
    margin: 30px 0;
    position: relative; 
    }

.project-text {
    position: absolute;
    z-index: 1;
    top: 7%;
    color: #fff;
    margin-right: 13px;
    padding: 24% 0;
    background: url('img/project-dark-grey.png');
    height: 381px;
    visibility: hidden;
    }


.project-entry:hover .project-text {
    visibility: visible;
    }

Answer 1

I need to style EVERY first, second and third post.

你可以使用nth-child

ul li:nth-child(3n+1) {
  color: green;
}
ul li:nth-child(3n+2) {
  color: blue;
}
ul li:nth-child(3n+0) {
  color: red;
}

<ul>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
</ul>