Невозможно определить, как установить цвет для конкретных div в цикле

Question

На первой странице моего сайта у меня есть 3 сообщения, которые вытаскивают, а под каждым из них находится ссылка. Мне нужно, чтобы каждый из 3-х разделов был другого цвета. Новые сообщения в этой категории будут отображаться здесь, поскольку они публикуются, но на нем будут отображаться только последние три. Мне нужно сделать так, чтобы три «слышать больше» 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

Я думаю, что проблема заключается в том, что вы не вызывая другие цвета: Я хотел бы попробовать что-то вроде этого: Что я делаю здесь является то, что я создаю переменную $i и сделать он $i=0 затем внутри цикла в то время как я $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 Я woul d добавить разные 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: Также может быть лучшее решение для этого ... но это должно сэкономить вашу жизнь на данный момент =)

Answer 2

вы можете использовать селектор

пример:

<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>