Question

我正在努力争取一点css，所以想知道是否有人可以提供帮助。

我在下面附上了我的菜单系统示例。我需要的是最后一次出现li.active设置为display：none - 无论我当前在菜单结构中的哪个位置。所以没有绝对的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>

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>

<小时/> 也就是说，AFAIK没有CSS解决方案来选择最深的嵌套 li.active。

您的选择是：

为最深的孩子，服务器端提供额外的课程（或者为所有不是最深的元素提供额外的课程）
诉诸于javascript，虽然不是因为它是针对您网站的风格和视觉行为而推荐的。

Answer 2

我可以看到你的问题中没有Jquery标签，但你仍然可以用jquery来试试

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

<强> DEMO

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

2 个答案: