Question

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

等级1,5,9,13 ......（4n + 1）style1

级别2,6,10,14 ......（4n + 2）style2

等级3,7,11,17 ......（4n + 3）style3

等级4,8,12,18 ......（4n + 3）style4

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（）都可以通过选择兄弟元素 - 即具有相同直接父元素的元素来工作。

您遇到的问题是嵌套的＆lt; ul＆gt;不是彼此的兄弟，它们是后代，因此计数会为每个重置。

如果没有完全重新构造结构，或者如果这不是一个选项，使用JavaScript，我无法想到一种方法来解决无限级别的＆lt; ul＆gt ;.

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

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

2 个答案: