設置從重複的顏色嵌套元素的背景色色板

Question

我有該前端我正在上運行的流體塊佈局。我想要將某個div的背景顏色設置爲某個類，或者將它的內部段落標記設置爲從重複的五個至八個顏色樣本中獲取的顏色。例如：紅色，綠色，藍色，粉紅色，黃色，紅色，綠色，藍色，粉紅色，黃色......。

本來我認爲這將有點直接使用nth-child僞選擇器通過類/ id選擇添加uglification位，但元素嵌套在幾個div中，我不能讓它工作。我不知道我是否應該在這裏或不使用JavaScript，很明顯，我寧願把它與CSS做我的JavaScript是相當薄弱的，但我真的不介意無論哪種方式，如果有人可以幫我一個解決方案。我周圍有一看，我瞭解的例子一樣http://jsfiddle.net/eudLg58p/工作，但我不能獲得額外的步驟，以選擇嵌套的div。我有可能咆哮錯誤的樹。

這裏的標記..

<div id="bhe-body"> 

    <div id="breadcrumbs"> 
     <div> 
      <h1 class="font-purple font20 center">Home/Sample/Sample Directory</h1> 
     </div> 

     <div> 
      <img id="back-arrow" src="mcwh-img/back-arrow.png"> 
      <img id="home-button" src="mcwh-img/home-icon.png"> 
     </div> 
    </div> 



    <a href="#"> 
     <div class="bhe-icon q" id=""> 
      <div class="icon-type"></div> 
     </div> 
    </a> 

    <a href="#"> 
     <div class="bhe-icon" id=""> 
      <div class="icon-type"></div> 
      <p class="">Directory two</p><!-- color needed here --> 
     </div> 
    </a> 

    <a href="#"> 
     <div class="bhe-icon" id=""> 
      <div class="icon-type"></div> 
      <p class="">Directory three</p><!-- color needed here --> 
     </div> 
    </a> 

    <a href="#"> 
     <div class="bhe-icon" id=""> 
      <div class="icon-type dir"></div> 
      <p class="">Directory four</p><!-- color needed here --> 
     </div> 
    </a> 

    <a href="#"> 
     <div class="bhe-icon" id=""> 
      <div class="icon-type dir"></div> 
      <p class="">Directory five</p><!-- color needed here --> 
     </div> 
    </a> 

    <a href="#"> 
     <div class="bhe-icon" id=""> 
      <div class="icon-type dir"></div> 
      <p class="">Directory six</p><!-- color needed here --> 
     </div> 
    </a> 

    <a href="#"> 
     <div class="bhe-icon" id=""> 
      <div class="icon-type dir"></div> 
      <p class="">Directory seven</p><!-- color needed here --> 
     </div> 
    </a> 

    <a href="#"> 
     <div class="bhe-icon" id=""> 
      <div class="icon-type dir"></div> 
      <p class="">Directory eight</p><!-- color needed here --> 
     </div> 
    </a> 

    <a href="#"> 
     <div class="bhe-icon" id=""> 
      <div class="icon-type dir"></div> 
      <p class="">Directory nine</p><!-- color needed here --> 
     </div>   
    </a> 


    <a href="#"> 
     <div class="bhe-icon triangle-border-1" id=""> 

      <div class="icon-type go-back"> 
       <img id="back-arrow-lower" src="mcwh-img/back-arrow-white.png"> 
      </div> 

     </div>   
    </a> 


    <a href="#"> 
     <div class="bhe-icon triangle-border-2" id=""> 

      <div class="icon-type home"> 
       <img src="mcwh-img/home-icon-white.png"> 
      </div> 

     </div>   
    </a> 

</div> 

..和這裏是我的CSS ...

.icon-type{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: white; 
} 


#bhe-body .icon-type p:nth-child(5n + 1){ 
    color: pink; 
} 

#bhe-body .icon-type p:nth-child(5n + 2){ 
    color: red; 
} 

#bhe-body .icon-type p:nth-child(5n + 3){ 
    color: green; 
} 

#bhe-body .icon-type p:nth-child(5n + 4){ 
    color: orange; 
} 

#bhe-body .icon-type p:nth-child(5n + 5){ 
    color: purple; 
} 

我的直覺是，我不完全瞭解僞選擇作品和它可能可能不是處理此任務的最有效方式。

感謝，任何幫助，將不勝感激:)

Answer 1

的nth-child選擇適用於同一父母的兄弟姐妹。該<p>元素不是同級，但<a>元素。此外，<p>元素不是icon-type類的元素的後代。

你可以嘗試：

#bhe-body > a:nth-child(5n + 1) > .bhe-icon > p { 
    color: pink; 
} 

但由於<div id="breadcrumbs">元素也是<a>元素的兄弟姐妹，你可以改用nth-of-type選擇。它與nth-child選擇器類似，但在計算兄弟元素時僅考慮相同類型的元素。

#bhe-body > a:nth-of-type(5n + 1) > .bhe-icon > p { 
    color: pink; 
} 

Answer 2

不是那樣的足球，就像這樣：https://jsfiddle.net/eudLg58p/1/

/* 1, 6, 11 ... */ 
section:nth-of-type(5n - 4) { 
    background-color: red; 
} 

/* 2, 7, 12 ... */ 
section:nth-of-type(5n - 3) { 
    background-color: orange; 
} 

/* 3, 8, 13 ... */ 
section:nth-of-type(5n - 2) { 
    background-color: blue; 
} 

/* you get the point ... */ 
section:nth-of-type(5n - 1) { 
    background-color: green; 
} 

section:nth-of-type(5n - 0) { 
    background-color: gray; 
} 

（用於hillarious足球參考：https://www.youtube.com/watch?v=T-AA3lk53DA&t=54）