嵌套层次CSS问题

Question

这里是小提琴：

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

我试图做一个可重复使用的一套CSS规则，使.ancestor类项目下的第一< LI>“在。孩子小号这些团体将是可见的，但他们的孩子将保持隐藏。问题在于，它打开了所有的“儿童”团体。

首先，我关闭所有患儿显示：没有，然后打开.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组件，请确保将其应用于这两个规则。