如何在开机自检时切换css类

时间:2015-07-23 作者:forrest

关于这个dev site, 我有一篇帖子显示了三个项目(即将发布),我想修改最后“了解更多”链接上的类,以显示三个不同的选项,每个条目一个。

p class=“lm红色”p class=“lm绿色”p class=“lm蓝色”

代码如下:

<?php
$args = array( \'post_type\' => \'post\', \'posts_per_page\' => 3, \'cat\' => 2, \'sort_by\' => \'event_begin_date\', \'order\' => \'ASC\');
query_posts( $args );
while (have_posts()) : the_post(); ?>

<div class="cs col-sm-6 col-md-4 col-lg-4">
<article class="project-item">
<a href="#">
    <figure class="fig">
        <img class="img-responsive" alt="" src="<?php the_field(\'event_image\'); ?>">
      </figure>
    <div class="content">
        <h3><?php the_title(); ?></h3>
        <p class="dates hidden-xs"><?php the_field(\'event_dates\'); ?></p>
        <p class="hidden-xs"><?php the_field(\'event_snippet\'); ?></p>
    <p class="lm">Learn More</p>
  </div>    
  </a>
</article>
</div>
<?php endwhile;?>
我曾尝试使用第n个子元素来定位css中的项目,但这样做会导致所有项目的样式都相同。

p.lm { 
    font: 16px "Open Sans", sans-serif; 
    text-align: center;
    text-transform: uppercase;
    background-color: #AC162C;
    position: absolute;
    width: 280px;
    bottom: 0;
    left: 20px;
    color: #fff;
}

p.lm:nth-child(2n) { 
    background-color: #b9b329;  
}

p.lm:nth-child(3n) { 
    background-color: #1270f8;
}
我希望能够通过WP或CSS来解决这一问题。

1 个回复
最合适的回答,由SO网友:Milo 整理而成

首先,不要使用query_posts, 使用WP_Query 创建其他查询。

您可以使用内置的current_post 查询对象的变量。

下面是一个使用post_class 功能:

<?php
$my_posts = new WP_Query( array( \'posts_per_page\' => 3 ) );
if( $my_posts->have_posts() ):
    while( $my_posts->have_posts() ):
        $my_posts->the_post();
        ?>
        <div <?php post_class( \'index-\' . ( $my_posts->current_post + 1 ) ); ?>>
            <p class="lm">Learn More</p>
        </div>
        <?php
    endwhile;
    wp_reset_postdata();
endif;
?>
然后在CSS中:

.index-1 .lm { /* styles for 1st post */ }
.index-2 .lm { /* styles for 2nd post */ }
.index-3 .lm { /* styles for 3rd post */ }

结束

相关推荐

主题从函数获取的CSS规则

我正在尝试更改我的215主题中条目页脚的颜色。我在子主题中的修改被覆盖,因为当网站在浏览器中呈现时,WordPress会将主题定制器生成的内联CSS输出到<head>, 它覆盖样式表。检查自定义程序。php文件,我看到了三个相关部分。首先是配色方案。然后,创建颜色变化并通过以下方式转换为rgba:$color_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[3] ); $color_sidebar_textcol