複数：n番目の子文

Question

私はポストのグリッドを持っている、と私はH2タグの間の各タイトルに異なる色（緑、赤、青 - そのパターン何度も繰り返し）を与えるしようとしています。

HTML（簡略化）は、このようなものである：

<div class="fusion-posts-container"> 
     <div> 
     <div>      
      <div> 
       <ul> 
       <li> 
        <div> 
        <img> 
         <div> 
          <div> 
          <a></a> 
          <div></div> 
          <a></a> 
          <h4><a></a></h4> 
          <div> 
           <a></a> 
          </div> 
          </div> 
         </div> 
        </div> 
        </li> 
       </ul> 
      </div> 
     <div class="fusion-post-content-wrapper"> 
      <div class="fusion-post-content post-content"> 
      <h2 class="entry-title"><a>THIS TITLE</a></h2> 

私はいくつかのアプローチを試みたと私はそのアンカーを標的に得て、その色を変更している最も近いがこれである：

.fusion-posts-container div:nth-child(3n+3) a{ 
color: #b7e352 !important;/*red*/ 
} 

.fusion-posts-container div:nth-child(3n+1) a{ 
color: #fb5322 !important;/*green*/ 
} 
.fusion-posts-container div:nth-child(3n+2) a{ 
color: #1592b0 !important;/*blue*/ 

}

しかし、私は、それはすべてのタイトルへの最後の色を適用すると同時に、それらのすべてを使用する場合、赤1でのみ動作1。

私はこのCSS: Can't get multiple :nth-child selectors to workを試みたが、うまくいきませんでした、誰もが正しい方向に私を指すことができますか？

Answer 1

（-n + 1）を使用してみてください、その後、あなたは3n+4をカウントする代わりにnth-of-type(3n+1)、あなたが第一のアイテムを使用することはできませんコンテンツで最初divとして兄弟を持つため、あなたのコードに、その上の項目1,4,7とに到達するため、そのカウントの変更注意を払いますつまり、4から7から10までカウントされます。

.fusion-posts-container div:nth-of-type(3n+4) a { 
 
    color: blue 
 
} 
 
.fusion-posts-container div:nth-of-type(3n+3) a { 
 
    color: red 
 
} 
 
.fusion-posts-container div:nth-of-type(3n+2) a { 
 
    color: green 
 
}

<div class="fusion-posts-container"> 
 
    <div> 
 
    <div> 
 
     <div> 
 
     <ul> 
 
      <li> 
 
      <div> 
 
       <img> 
 
       <div> 
 
       <div> 
 
        <a></a> 
 
        <div></div> 
 
        <a></a> 
 
        <h4><a></a></h4> 
 
        <div> 
 
        <a></a> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="fusion-post-content-wrapper"> 
 
     <div class="fusion-post-content post-content"> 
 
      <h2 class="entry-title"><a>THIS TITLE</a></h2> 
 
     </div> 
 
     </div> 
 
     <div class="fusion-post-content-wrapper"> 
 
     <div class="fusion-post-content post-content"> 
 
      <h2 class="entry-title"><a>THIS TITLE</a></h2> 
 
     </div> 
 
     </div> 
 
     <div class="fusion-post-content-wrapper"> 
 
     <div class="fusion-post-content post-content"> 
 
      <h2 class="entry-title"><a>THIS TITLE</a></h2> 
 
     </div> 
 
     </div> 
 
     <div class="fusion-post-content-wrapper"> 
 
     <div class="fusion-post-content post-content"> 
 
      <h2 class="entry-title"><a>THIS TITLE</a></h2> 
 
     </div> 
 
     </div> 
 
     <div class="fusion-post-content-wrapper"> 
 
     <div class="fusion-post-content post-content"> 
 
      <h2 class="entry-title"><a>THIS TITLE</a></h2> 
 
     </div> 
 
     </div> 
 
     <div class="fusion-post-content-wrapper"> 
 
     <div class="fusion-post-content post-content"> 
 
      <h2 class="entry-title"><a>THIS TITLE</a></h2> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

は、あなたがnth-of-type代わりのnth-child

でこれを達成することができ、これは（あなたの質問はありません）HTMLのあなたの継続だろうと仮定すると、

.fusion-posts-container div:nth-child(-n + 1) a{color: #b7e352 !important;/*red*/} 

.fusion-posts-container div:nth-child(-n + 2) a{color: #fb5322 !important;/*green*/} 

.fusion-posts-container div:nth-child(-n + 3) a{color: #1592b0 !important;/*blue*/}