php - 无法弄清楚如何在循环中为特定的 div 设置颜色

Question

在我网站的首页上，我拉取了 3 个帖子，每个帖子下面都有一个 div，它是一个链接。我需要 3 个 div 中的每一个都是不同的颜色。此类别中的新帖子将在发布时显示在此处，但它只会显示最近的三个。我需要使三个“听到更多>”div 始终具有相同的颜色。下面是图片和代码。

目前情况如何:

我如何需要它:

HTML:

<?php 
  $args = array(
    'post_type' => 'success',
    'posts_per_page' => 3,
    'order' => 'ASC'
  );

  $query = new WP_Query($args);
?>

<?php while ($query->have_posts()) : $query->the_post(); ?>
  <div class="success-stories-div">
    <div class="success-stories-text">
      <p style="font-size: 120%;">Success Story</p>
      <?php the_content(); ?>
    </div>
    <a href="<?php the_permalink(); ?>">
      <div class="success-stories-link">Hear More >
      </div>
    </a>
  </div>
<?php endwhile; wp_reset_query(); ?>

CSS:

.success-stories .success-stories-link {
  margin-top: 1em;
  width: 465px;
  height: 50px;
  background-color: #F4B147;
  padding: 12px 0 0 15px;
}

Answer 1

你可以使用选择器

例子:

    <style>
div{
  margin-top: 1em;
  width: 465px;
  height: 50px;
  padding: 12px 0 0 15px;
}

div.success-stories-link:nth-child(1) { 
    background: green;
}
div.success-stories-link:nth-child(2) { 
    background: yellow;
}
div.success-stories-link:nth-child(3) { 
    background: red;
}

</style>

<div class="success-stories-link"><a href="">1</a></div>
<div class="success-stories-link"><a href="">2</a></div>
<div class="success-stories-link"><a href="">3</a></div>