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

Question

在我网站的首页上，我有3个帖子被拉，每个帖子下面都有一个div作为链接。我需要3个div中的每一个都是不同的颜色。此类别中的新帖子将在发布时显示在此处，但它只显示最近的三个。我需要做到这一点，以便三个＆＃34;听到更多＆gt;＆＃34; 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>

Answer 2

我认为问题在于你没有调用其他颜色：我会尝试这样的事情：我在这里做的是我创建一个变量$i并使其成为$i=0然后在while循环中我增加$i，所以我可以在css class的末尾添加一个数字，它将如下所示： class="success-stories-link<?php echo $i; ?>"

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

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

  <?php  $i = 0;
    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<?php echo $i; ?>">Hear More >
  </div>
</a>
  </div>
   <?php $i++; endwhile; wp_reset_query(); ?>

在css中我会添加不同的background-color：

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

我没有测试过这段代码。另外，我正在查看图片How I need to be： 此外，可能有一个更好的解决方案......但这应该可以挽救你的生命=）