multiple: N-Kind-Anweisungen

Question

Ich habe ein Raster von Posts, und ich versuche, jeden Titel zwischen h2 Tags eine andere Farbe (grün, rot, blau - immer und immer wieder das Muster) zu geben.

die html (vereinfacht) ist wie folgt:

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

ich verschiedene Ansätze ausprobiert haben und das nächste, was ich zu Targeting, dass Anker bekommen haben und seine Farbe ist mit diesem ändern:

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

}

Aber die einzige, die funktioniert, ist die rote, wenn ich sie alle gleichzeitig verwende, wendet es die letzte Farbe auf alle Titel an.

Ich versuchte dies CSS: Can't get multiple :nth-child selectors to work, aber hat nicht funktioniert, kann mir jemand in die richtige Richtung zeigen?

Answer 1

Angenommen, dies Ihre Fortsetzung von HTML wäre (was Ihre Frage nicht hat), dann können Sie dies erreichen mit nth-of-type statt nth-child

Beachten Sie, dass anstelle von nth-of-type(3n+1), um Elemente 1,4,7 usw. zu erreichen, aufgrund Ihres Codes mit einem Geschwister als ersten div mit Inhalt können Sie nicht den 1. Artikel verwenden, so dass die Zählung ändert, dann sollten Sie zählen 3n+4, das heißt, es wird von 4 bis 7 bis 10 gezählt und so weiter.

.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

versuchen Sie es mit (-n + 1)

.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*/}