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

我試圖將帖子樣式設置爲與nth-child()不同，一個帖子有一個flex方向，第二個帖子，但不知何故，我無法實現我想要的。這是我的CSS：用nth-child添加不同的flex方向（）

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

所以，我怎樣才能實現一個員額與圖像和標題去一個方向，二來另一個？

來源

2017-08-14 Nemus

使用'even'和'odd'對於重複交替樣式 - [MDN（https://developer.mozilla.org/en/docs/Web/CSS/:nth-child#Example_selectors） –

但'第n個-child（2n + 0）'或者'nnth-child（2n）'從每個第二個開始，從第二個開始（如'even'也是），那它怎麼不適合你？ – LGSon

你可以發佈一個HTML例子，其中有一個以上的頭版元素，以便我們真的可以檢查這個問題嗎？ – vals

根據該意見，因爲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>

希望這是有道理的。如果沒有，留下評論，我會盡力澄清一點。

來源

2017-08-15 02:29:10 Jonathan

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

回答

相關問題