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

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

视图示例

当我有无限级别的嵌套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: "020"; 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（）都是通过选择同级元素来工作的，也就是说，这些元素具有相同的直接父元素。

您遇到的问题是嵌套<ul>s彼此不是兄弟姐妹，他们是后代，因此每个人的计数都会重置。

对于<ul>s，而不需要完全重新设计结构，或者如果这不是一个选项，则使用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);  
    });