1

ネストされた要素があり、すべてのレベルに異なるスタイルを持たせたい

レベル 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の無限レベルがあるときに、多くのクラスを使用せずに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; }
4

2 に答える 2

0

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);  
    });
于 2013-08-21T11:59:43.820 に答える
0

3番目の例のように、これがクラス（またはJavaScript）なしで実行できるとは思いません。nth-child() と nth-of-type() はどちらも、兄弟要素 (つまり、同じ直接の親要素を持つ要素) を選択することによって機能します。

あなたが実行している問題は、ネストされた <ul> が互いに兄弟ではなく、子孫であるため、それぞれのカウントがリセットされることです。

構造を完全に作り直すか、これがオプションでない場合は JavaScript を使用せずに、無限レベルの <ul> に対してこれを解決する方法は考えられません。

于 2013-08-20T21:56:29.667 に答える