Question

我正在使用ACF在网页上发布WP帖子。但我能够使用第n个：子选择器来控制某些CSS属性。继承PHP显示每件事都很好。问题是（我假设）“foreach”项目正在制作第n个：孩子不工作，因为他们不是兄弟姐妹？

<div class="row">

<?php
        $posts = get_field('projects');
            if ( $posts ) {
                foreach ( $posts as $post ): ?>
            <div class="col-xl-6 no-space">
            <?php
                    setup_postdata($post); ?>
                    <div class="project__wrap">
                      <div class="project__project"><?php echo get_the_post_thumbnail(); ?></div>
                        <div class="project__description__list col-xl-6"><div class="project-content"><a href="<?php echo get_permalink(); ?>"><h2><?php echo get_the_title() ; ?></h2><p><?php echo apply_filters( 'the_content', wp_trim_words( strip_tags( $post->post_content ), 15 ) ); ?></p></a></div>

            <div class="heart"><?php 
                $image = get_field('heart_icon');
                if( !empty($image) ): ?>
                <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
            <?php endif; ?>
            </div>

                        </div> <!-- .project__description__list -->
                    </div> <!-- .project__wrap -->

                <?php wp_reset_postdata(); ?>
           </div>
                <?php endforeach;
                }   
                ?>

div.project-content:nth-child(odd) {
  top:0;
  left:0;
}

div.project-content:nth-child(even) {
  bottom:0;
  right:0;
}

Answer 1

您的案例中的问题是，project-content始终是其容器的第一个子容器（project__description__list）。你想要的是.col-xl-6.no-space。但是这将是非常模糊的，所以我建议，在这个div中添加另一个类 - 即project-row-item。

<div class="col-xl-6 no-space project-row-item">

这样做，你可以像这样改变你的CSS

.project-row-item:nth-child(odd) div.project-content {
  top:0;
  left:0;
}

.project-row-item:nth-child(even) div.project-content {
  bottom:0;
  right:0;
}

Answer 2

<?php    $posts = get_field('projects');
 if ( $posts ) {
 $i=0; $k; $class='';
     foreach ( $posts as $post ): 
        $k= $i%2; 
        if($k==0){ $class='even'; } else { $class='odd'; }?>
        <div class="col-xl-6 no-space">
            <?php setup_postdata($post); ?>
                <div class="project__wrap">
                  <div class="project__project"><?php echo get_the_post_thumbnail(); ?></div>
                    <div class="project__description__list col-xl-6"><div class="project-content <?php echo $class; ?>"><a href="<?php echo get_permalink(); ?>"><h2><?php echo get_the_title() ; ?></h2><p><?php echo apply_filters( 'the_content', wp_trim_words( strip_tags( $post->post_content ), 15 ) ); ?></p></a></div>
                    <div class="heart"><?php  $image = get_field('heart_icon');
                        if( !empty($image) ): ?>
                            <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                        <?php endif; ?>
                    </div>
                  </div> <!-- .project__description__list -->
                </div> <!-- .project__wrap -->
            <?php wp_reset_postdata(); ?>
        </div>
<?php $i++; endforeach; }   ?>

现在你可以改变你的风格：

div.project-content.odd {
  top:0;
  left:0;
}

div.project-content.even {
  bottom:0;
  right:0;
}

带有PHP数组的nth-child

2 个答案: