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

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-postsdiv，后者总是由第 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>

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