如何根據深度級別在嵌套元素中獲取不同的樣式？

Question

我已經嵌套元件，我想的是每一級有不同的風格

級別1，5，9，13 ...（4N + 1）STYLE1

級別2，6，10，14 .. （4n + 2個）藍紫魅力

3級，7，11，17 ...（4N + 3）節日禮物

4級，8，12，18 ...（4N + 3）都市風情

view exemples

如何獲得第三屆爲例風格，而無需使用過多的類當我有嵌套UL的無限水平

HTML

enter code here 
     <div id="content"> 
    <h1>Exemple 1 neighbor ul and nth-child(an+b) pseudo class</h1> 
    <div class="exemple"> 
    <ul class="clearfix"> 
    <li> item 1 1st ul</li> 
    <li> item 2 1st ul</li> 
    <li> item 3 1st ul</li> 
    </ul> 

    <ul class="clearfix"> 
    <li> item 1 2nd ul</li> 
    <li> item 2 2nd ul</li> 
    <li> item 3 2nd ul</li> 
    </ul> 

    <ul class="clearfix"> 
    <li> item 1 3rd ul</li> 
    <li> item 2 3rd ul</li> 
    <li> item 3 3rd ul</li> 
    </ul> 

    <ul class="clearfix"> 
    <li> item 1 4th ul</li> 
    <li> item 2 4th ul</li> 
    <li> item 3 4th ul</li> 
    </ul> 
    </div> 
    <h1>Exemple 2 nested ul and nth-child(an+b) pseudo class</h1> 
    <div class="exemple"> 
    <ul class="clearfix"> 
    <li> item 1 1st ul 

      <ul class="clearfix"> 
      <li> item 1 2nd ul 

        <ul class="clearfix"> 
        <li> item 1 3rd ul</li> 
        <li> item 2 3rd ul</li> 
        <li> item 3 3rd ul 

         <ul class="clearfix"> 
         <li> item 1 4th ul</li> 
         <li> item 2 4th ul</li> 
         <li> item 3 4th ul</li> 
         </ul> 

        </li> 
        </ul> 

      </li> 
      <li> item 2 2nd ul</li> 
      <li> item 3 2nd ul</li> 
      </ul> 

    </li> 
    <li> item 2 1st ul</li> 
    <li> item 3 1st ul</li> 
    </ul> 
    </div> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <h1>Exemple 3 nested ul and 4 class for different colors</h1> 
    <div id="exemple3"> 
    <ul class="clearfix level1"> 
    <li> item 1 1st ul 

      <ul class="clearfix level2"> 
      <li> item 1 2nd ul 

        <ul class="clearfix level3"> 
        <li> item 1 3rd ul</li> 
        <li> item 2 3rd ul</li> 
        <li> item 3 3rd ul 

         <ul class="clearfix level4"> 
         <li> item 1 4th ul</li> 
         <li> item 2 4th ul</li> 
         <li> item 3 4th ul</li> 
         </ul> 

        </li> 
        </ul> 

      </li> 
      <li> item 2 2nd ul</li> 
      <li> item 3 2nd ul</li> 
      </ul> 

    </li> 
    <li> item 2 1st ul</li> 
    <li> item 3 1st ul</li> 
    </ul> 
    </div> 
    </div> 

CSS

enter code here 
    .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
    .clearfix:after { clear: both; } 
    .clearfix { zoom: 1; } 
    #content{ 
     width:500px; 
     margin:0 auto; 
    } 
    h1{text-align:center; font-size:2em;} 
    ul {list-style: none; padding:10px; margin:10px;} 
    ul li {color:#fff; float:left; margin:10px 30px; position:relative; white-space:nowrap;} 
    ul ul { position:absolute; top:31px; left:-50px} 
    ul ul ul { position:absolute; top:10px; left:116px} 
    .exemple ul:nth-child(4n+1) { background: navy; } 
    .exemple ul:nth-child(4n+2) { background: green; } 
    .exemple ul:nth-child(4n+3) { background: maroon; } 
    .exemple ul:nth-child(4n+4) { background: purple; } 

    #exemple3 .level1 { background: navy; } 
    #exemple3 .level2 { background: green; } 
    #exemple3 .level3 { background: maroon; } 
    #exemple3 .level4 { background: purple; } 

Answer 1

JavaScript是最好的方法：

function style(obj,depth){ 
    switch (depth%6) { 
     case (0): 
     obj.addClass('level1'); 
     break; 
     case (1): 
     obj.addClass('level2'); 
     break; 
     case (2): 
     obj.addClass('level3'); 
     break; 
     case (3): 
     obj.addClass('level4'); 
     break; 
     case (4): 
     obj.addClass('level5'); 
     break; 
     case (5): 
     obj.addClass('level6'); 
     break; 
     } 
    } 

function color(nav){ 
    $ul=nav.find('ul'); 
    $ul.each(function(){ 
     style($(this),$(this).parents("ul").length); 
    }); 

Answer 2

我不相信這是可行的，而不班（或JavaScript），就像你的第三個例子。 nth-child（）和nth-of-type（）都通過選擇同胞元素來工作 - 也就是具有相同直接父元素的元素。

您正在運行的問題是嵌套的< ul不是彼此的兄弟姐妹，他們是子孫，所以計數重置爲每一個。

我想不出一種方法可以解決這個問題，無論是完全重構結構還是使用JavaScript都不是一種選擇，無限級的<ul>。