Question

我试图将帖子设置为与nth-child()不同，一个帖子有一个弹性方向，另一个帖子，但不知怎的，我无法达到我想要的效果。这是我的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个第一个孩子。

<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>

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

使用nth-child（）添加不同的flex方向

1 个答案: