Question

给出以下html：

<ul class="nav">
  <li class="level0">..</li>
  <li class="level0">..</li>
  <li class="level0 active">
    <a href="#">Category Name</a>
    <ul class="level0">
      <li class="level1 active">
        <a href="#">Sub-category</a>
        <ul class="level1">
          <li class="level2 active">
            <a href="#">I only want this link styled</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="level0">..</li>
</ul>

我是如何设置嵌套链接的样式，考虑到每个父li还有一个'active'类？我以为我可以使用.nav .active:last-child > a在上面的示例中工作，但是从那个li.level2中移除活动类，然后它会对它上面的li.level1进行样式化，但它不是（参见下面的jsfiddle）举个例子。）

我可能只是有一个脑力，但我想不出用css来定位该元素的方法。我唯一能想到的是使用javascript从父元素中删除'active'类，但我觉得必须有其他方法。

这是一个更精细的jsfiddle示例，它说明了两个测试用例：http://jsfiddle.net/K4e37/

这是否可以在不更改标记且不使用javascript的情况下实现？

编辑：我没有正确考虑最后一个孩子，但这里有一个更新的例子，它非常接近我想要的东西，只需要不要设置更高级别的元素：http://jsfiddle.net/K4e37/2/

Answer 1

根据其他答案（here，here），您问题的答案是否定的。如上所述，“last-of-type”不适用于类，而“last-child”不适用于HTML中的子嵌套结构。我想你必须改变标记或使用Javascript。

Answer 2

列表项

如果您甚至没有'级别'类，仍然可以使用以下选择器定位您的特定html链接（如果您只需要设置要设置的特定链接）。如果您的要求符合要求，请链接！

Usiong CSS：

ul.nav li ul li ul li.active a { color: #FF0000; }

干杯：）

仅将样式应用于具有特定类的嵌套uls中的最后一项

2 个答案: