如何根据深度级别在嵌套元素中获得不同的样式？

Question

我有嵌套元素，我希望每个级别都有不同的样式

级别 1、5、9、13 ... (4n+1) 样式1

级别 2、6、10、14... (4n+2) 样式2

级别 3、7、11、17... (4n+3) 样式3

级别 4、8、12、18... (4n+3) 样式4

view exemples

当我有无限级别的嵌套 ul 时，如何在不使用许多类的情况下获得第 3 种示例样式

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）这是可行的，就像你的第三个例子一样。 nth-child() 和 nth-of-type() 都通过选择兄弟元素来工作 - 即具有相同直接父元素的元素。

您遇到的问题是嵌套的

不是彼此的兄弟，它们是后代，因此每个人的计数都会重置。

如果不完全修改结构，或者如果这不是一个选项，使用 JavaScript，我想不出一种方法来解决无限级别的

问题。

Answer 2

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);  
    });