ネストされた階層CSSの問題

Question

はフィドルです：

https://jsfiddle.net/3h1hxy2w/4/

私は.childrenで.ancestorクラス下の項目最初< LI>のように、CSSルールの再利用可能なセットを作るしようとしていますグループは表示されますが、その子は隠れたままです。問題は、すべての「子ども」グループを開くのが遅れているようだということです。

まず私は、ディスプレイを持つすべての子を閉じます。どれも、このような状況では.ancestor

の任意の子孫を開いて、私は、任意の有用なクラスを追加していないかのjQueryを使用することはできません。電流出力は、このようなものです：

Item One 

    more items 
      STUFF! 
      more stuff 
      even more stuff 
     more items 
     More items 
    more items 2 
     more items 
     more items 
     More items 
    more items 
     more items 
     more items 
     More items 

Item Two 

Item Three 

が、私は

Item One 
    more items 
      STUFF! 
      more stuff 
      even more stuff 
     more items 
     More items 
    more items 2 
    more items 

Item Two 

Item Three 

のための任意のアイデアを撮影していますか？

これは、避けることは常に重要です！重要なHTML

<ul id="hier"> 
    <li class="ancestor"> 
    Item One 
     <ul class="children"> 
     <li class="ancestor">more items 
       <ul class="children"> 
       <li class="ancestor current-parent"> 
       Parent 
        <ul class="children"> 
        <li class="current-cat">STUFF!</li> 
        <li>more stuff</li> 
        <li>even more stuff</li> 
        </ul> 
       </li> 
       <li>more items</li> 
       <li>More items</li> 
       </ul> 
     </li> 
     <li>more items 2 
       <ul class="children"> 
       <li>more items</li> 
       <li>more items</li> 
       <li>More items</li> 
       </ul> 
     </li> 
     <li>more items 
       <ul class="children"> 
       <li>more items</li> 
       <li>more items</li> 
       <li>More items</li> 
       </ul> 
     </li> 
     </ul> 
    </li> 
    <li> 
    Item Two 
     <ul class="children"> 
     <li>more items 
       <ul class="children"> 
       <li>more items</li> 
       <li>more items</li> 
       <li>More items</li> 
       </ul> 
     </li> 
     <li>more items 
       <ul class="children"> 
       <li>more items</li> 
       <li>more items</li> 
       <li>More items</li> 
       </ul> 
     </li> 
     <li>more items 
       <ul class="children"> 
       <li>more items</li> 
       <li>more items</li> 
       <li>More items</li> 
       </ul> 
     </li> 
     </ul> 
    </li> 
    <li> 
    Item Three 
     <ul class="children"> 
     <li>more items 
       <ul class="children"> 
       <li>more items</li> 
       <li>more items</li> 
       <li>More items</li> 
       </ul> 
     </li> 
     <li>more items 
       <ul class="children"> 
       <li>more items</li> 
       <li>more items</li> 
       <li>More items</li> 
       </ul> 
     </li> 
      <li>more items 
       <ul class="children"> 
       <li>more items</li> 
       <li>more items</li> 
       <li>More items</li> 
       </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 

そして、ここでは、これまでCSSで

ul { list-style-type: none; } 

#hier li .children li { display: none; } 

.ancestor .children li { display: block !important;} 

Answer 1

ul { list-style-type: none; } 
.children li { display: none; } 
.ancestor > .children > li { display: block; } 

です。この例では、直接子孫セレクタ（>）はあなたの友人です。ルールのidコンポーネントが必要な場合は、必ず両方のルールに適用してください。