nth-child 和 PHP 数组

Question

我正在使用 ACF 在页面上 post WP posts。但是我能够使用 nth:child 选择器来控制某些 CSS 属性。这是 PHP ，它显示一切都很好。问题是（我假设）"foreach" 项使 nth:child 不起作用，因为它们不是兄弟姐妹？

<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 添加另一个 class - 即 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;
}

nth-child 和 PHP 数组

nth-child with a PHP array

php

arrays

wordpress

advanced-custom-fields