CSS-隐藏最后一个活动的子菜单项

我正在与css斗争，所以想知道是否有人可以帮助

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

我知道这是错误的，但给出了我努力实现的想法

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

因此，在下面的示例中，仅隐藏hello项

<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>

页面
页面
第页
页面

子页面

子网页
子网页
子网页
子网页
子页面

你好
你好
你好


子网页


子页面
子页面


页面

我可以看出您的问题中没有Jquery标记，但您仍然可以使用Jquery进行尝试

$('.active').last().css('display','none');

---

：最后一个孩子可能会让你感到困惑，因为它听起来像什么。它将直接选择单个父节点的最后一个子节点。换句话说，您的选择器将选择一个
li.active
仅当它是相对于其同级的最后一个项目时（但是，这并没有查看您所期望的深度）


测试
试验
测试


测试
测试
测试




测试
试验
测试


测试



也就是说，如果没有CSS解决方案来选择嵌套最深的
li.active

你的选择是：

为最深的子级服务器端提供一个额外的类（或者，为所有非最深的元素提供一个额外的类）
求助于javascript，尽管如果是为了网站的风格和视觉行为，并不推荐使用javascript
我需要这个来处理纯css，jquery使用可以关闭的javascript。另外，我不想仅仅为了解决这个问题而安装一个完整的框架@Scott听起来很严肃，但是使用jQuery.min，您只需要加载大约95KB，这是完全可以接受的，如果您组织好站点系统，它甚至可以被缓存（因此站点中只有1个页面必须加载jQuery，而其他页面则不必加载）。如果你不想使用jQuery，即使是纯JS也可以解决这个问题。
：最后一个孩子可能会让你感到困惑，因为它听起来像什么。它将直接选择单个父节点的最后一个子节点。换句话说，只有当某个
li.active
是相对于其同级的最后一项时，您的选择器才会选择该项（但这并不是您所期望的深度）。使用CSS不可能做到这一点。唯一的方法是向该元素添加一个额外的类，并向该类添加所需的样式。@MDeSchaepmeester是的，这是正确的。我正在寻找可以处理节点深度的内容，但不确定是否可以使用纯css：（相关，如果不是重复的话：是的，我环顾了一下，甚至：last of type只对子对象有效，因此也不起作用。就像你说的，我怀疑目前是否有CSS解决方案。遗憾的是，我们没有类似于
：last
的东西，它将返回到目前为止查询的列表中的最后一个元素，而不仅仅是子对象。@gillesc CSS许多缺点。它在筛选所选元素方面没有提供太多功能。感谢您提供的信息，我确实了解最后一个孩子的工作原理，但不知道是否有其他方法可以做到这一点-即使使用css3选择器。我选择了服务器端解决方案，我在导航控件中添加了一些额外的逻辑以输出class=“active selected”为我的活动页面干杯
<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>