CSS - 隐藏最后一个事件的子菜单项

Question

我正在为一些 CSS 而苦苦挣扎，所以想知道是否有人可以提供帮助。

我在下面附上了我的菜单系统的示例。我需要的是将 li.active 的最后一次出现设置为显示:无 - 无论我当前在菜单结构中的哪个位置。所以请不要使用绝对的 css 路径，我需要一些灵活的东西。

我知道这是错误的，但给出了我要实现的目标的想法。

#leftnav li.active:last-child ul { display:none; }

所以在下面的例子中，只有 hello items 被隐藏了。

<div id="leftnav">
  <ul>
    <li>page</li>
    <li>page</li>
    <li>page</li>   
    <li class="active">page
      <ul>
        <li class="active">subpage
          <ul>      
            <li>subsubpage</li>
            <li>subsubpage</li>
            <li>subsubpage</li>
            <li>subsubpage</li>
            <li class="active">subsubpage
                <ul>
                    <li>hello</li>
                    <li>hello</li>
                    <li>hello</li>
                </ul>
            </li>
            <li>subsubpage</li> 
          </ul>
        </li>
        <li>subpage</li>
        <li>subpage</li>
      </ul>
    </li>   
    <li>page</li>
  </ul> 
</div>

Answer 1

:last-child 可能让您感到困惑，因为它听起来像什么。它将从字面上选择单个父节点的last 子节点。换句话说，您的选择器将选择 li.active仅，如果它是相对于其兄弟最后项>(然而，这并没有，看看深度，这正是您所期望的)。

<ul>
  <li class="active">test</li>
  <li>test</li>
  <li class="active">test</li> <!-- select THIS one -->
</ul> 

<ul>
  <li class="active">test</li>
  <li class="active">test</li>
  <li>test</li> <!-- select NONE because the .active ones are not last child -->
</ul>

<ul>
  <li>
    <ul>
      <li class="active">test</li>
      <li>test</li>
      <li class="active">test</li> <!-- select THIS -->
    </ul>
  </li>
  <li class="active">test</li> <!-- And this one too!! -->
</ul>

---

也就是说，据我所知，没有选择 最深嵌套 li.active 的 CSS 解决方案。

您的选择是:

1. 给服务器端最深的 child 一个额外的类(或者，给所有不是最深的元素一个额外的类)
2. 求助于 javascript，但如果它符合您网站的风格和视觉行为，则不完全推荐。