Question

这是小提琴：

我试图制作一组可重复使用的CSS规则，以便.ancestor类下的项目成为第一个＆lt;我会在.children群组中看到，但他们的孩子会保持隐藏状态。问题是它似乎开始向所有儿童开放＃39;基团。

首先我用display：none关闭所有的孩子，然后打开.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; }

避免重要是非常重要的。在这个例子中，直接后代选择器（＆gt;）是你的朋友。如果您需要规则的id组件，请务必将其应用于这两个规则。

嵌套层次结构CSS问题

1 个答案: