css - 使用 nth-child() 添加不同的 flex 方向

Question

我试图将帖子的样式设置为与 nth-child() 不同，一个帖子有一个 flex 方向，另一个帖子有一个方向，但不知何故我无法实现我想要的。这是我的 CSS:

.front-page-posts {
    display: flex;
    height: 620px;
    background: black;
}

.fp-image img {
    max-height: 100%;
}
.fp-title {
    margin: auto;
}
.front-page-posts:nth-child(2n+0) {    
    flex-direction: row-reverse;
}

这是我的 wp 主题中的目标标记:

<article id="post-34" class="post-34 post type-post status-publish format-standard has-post-thumbnail hentry category-front-page">
   <div class="front-page-posts">
     <div class="fp-title">
         <h1 class="entry-title">Marketeers with a passion for people.</h1>     
     </div>
     <div class="fp-image">
         <img src="two-guys.jpg">       
     </div>
   </div><!-- .entry-header -->
</article>

那么，我怎样才能使一篇文章的图片和标题指向一个方向，而第二个指向另一个方向呢？

Answer 1

根据评论，因为 WordPress 重复了 article 而不是 .front-page-posts，这是您必须使用的代码:

article.type-post:nth-child(2n+0) .front-page-posts {
    flex-direction: row-reverse;
}

你的 HTML 看起来像这样，所以你必须迭代文章的 CSS 而不是 .front-page-posts div，它总是由第 n 个第一个 child .

<div class="wrapper">
    <article id="post-34" class="post-34 post type-post status-publish format-standard has-post-thumbnail hentry category-front-page">
       <div class="front-page-posts">
         <div class="fp-title">
             <h1 class="entry-title">Marketeers with a passion for people.</h1>     
         </div>
         <div class="fp-image">
             <img src="two-guys.jpg">       
         </div>
       </div><!-- .entry-header -->
    </article>
    <article id="post-34" class="post-34 post type-post status-publish format-standard has-post-thumbnail hentry category-front-page">
       <div class="front-page-posts">
         <div class="fp-title">
             <h1 class="entry-title">Marketeers with a passion for people.</h1>     
         </div>
         <div class="fp-image">
             <img src="two-guys.jpg">       
         </div>
       </div><!-- .entry-header -->
    </article>
</div>

希望这是有道理的。如果没有，请发表评论，我会尝试进一步澄清。