使用 nth-last-child(odd) 和 (even) 将 css 添加到图像

Question

我在 wordpress 页面中有一个有 2 行的部分，第一行布局是文本 |图像和第二行布局是文本 |图片。我正在使用 ACF 来获取内容，并且我使用 nth-last-of-type(even) 和 nth-last-of-type(odd) 来使两行的内容反转。我的问题是该行中的图像需要切掉角，这也需要反转（左切第一行，右切第二行）

它应该是这样的： http://melindcooper.com/image1.jpg

我有切角工作，但它正在将顶部和底部图像的图像切割在同一位置：

http://melindcooper.com/image2.jpg

这是我的代码：

     <?php
     $posts = get_posts(array(
 'posts_per_page'   => -1,
 'post_type'        => 'leaders',
 'orderby' => 'menu_order',
 'order' => 'ASC',
 'meta_key'     => 'show_on_home_page',
 'meta_value'   => 'yes'
 ));
      if( $posts ): ?>
      <?php foreach( $posts as $post ):
     setup_postdata( $post );

   <div class="zone5" style="background-color:#ccc; margin-bottom: 20px;">
<div style="width: 50%;">
    <p class="Stitle"><?php the_field('first_name'); ?> <?php the_field('last_name'); ?></p>
    <p class="staff"><?php the_field('title'); ?></p>
    <p class="staff"><?php the_field('bio'); ?></p>
</div>
<div style="width: 50%;" class="cutCorner">
    <img src="<?php the_field('photo'); ?>" />
</div>
</div>
 <?php endforeach; ?>
 <?php wp_reset_postdata(); ?>
 <?php endif; ?>

这是我的 CSS：

.zone5:nth-last-of-type(odd) {
  display: -webkit-flex; /* Safari */
  -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
  display: flex;
  flex-direction: row-reverse; 
  }

 .zone5:nth-last-of-type(even) {
  display: -webkit-flex; /* Safari */
  -webkit-flex-direction: row; /* Safari 6.1+ */
  display: flex;
  flex-direction: row; 
  }

 .cutCorner {
   position:relative; 
   display: inline-block;
   }

  .cutCorner img {
    display:block;
   }
  .cutCorner:after {
  position:absolute; left:-2px; top:-2px; content:'';
  border-top: 400px solid #ccc;
  border-right: 250px solid transparent;
  }

这是我需要用于第二行图像的 css：

//Bottom Image
 .cutCorner::after {
  position: absolute;
  right: -2px;
  top: -2px;
  content: '';
  border-top: 400px solid #ccc;
  border-left: 250px solid transparent;
  }

如何使用 nth-last-of-type 更改底部图像 css？任何帮助将不胜感激！

Answer 1

现在重新编写您的代码，您将在最后一个 zone5 div 上拥有 lastitem 类，在最后一个角落 div 上拥有 lastcorner 类。

您可以分别定位这些类

我已经测试了这段代码，它适用于最后一项

<?php

$lastItem = '';
$lastCorner = '';

$posts = new WP_Query(array(
  'posts_per_page'   => -1,
  'post_type'        => 'leaders',
  'orderby' => 'menu_order',
  'order' => 'ASC',
  'meta_key'     => 'show_on_home_page',
  'meta_value'   => 'yes'
  ));

if ( $posts->have_posts() ) : while ( $posts->have_posts() ) : $posts->the_post();

if ($posts->current_post +1 == $posts->post_count) { 
  $lastItem = 'lastitem';
  $lastCorner = 'lastcorner';
}

?>
  <div class="zone5 <?php echo $lastItem; ?>" style="background-color:#ccc; margin-bottom: 20px;">
    <div style="width: 50%;">
      <p class="Stitle"><?php the_field('first_name'); ?> <?php the_field('last_name'); ?></p>
      <p class="staff"><?php the_field('title'); ?></p>
      <p class="staff"><?php the_field('bio'); ?></p>
    </div>
    <div style="width: 50%;" class="cutCorner <?php echo $lastCorner; ?>">
      <img src="<?php the_field('photo'); ?>" />
    </div>
  </div>
<?php endwhile; endif; wp_reset_postdata(); ?>