Question

鉴于以下HTML，将选择哪个CSS规则，并且只选择显示TWO的行？

<ul class="menu">
  <li><a>void</a></li>
  <li class="active">
    <a>one</a>
    <ul class="sub-menu">
      <li class="active"><a>two</a></li>
      <li><a>three</a></li>
    </ul>
  </li>
</ul>

以下选择器不起作用：

.active:last-of-type {...}

此外，我必须澄清，如果没有子菜单或者子菜单中的链接未激活，则必须通过相同的规则选择父菜单。换句话说，给定以下HTML，相同的规则将突出显示ONE：

的行

<ul class="menu">
  <li><a>void</a></li>
  <li class="active">
    <a>one</a>
    <ul class="sub-menu">
      <li><a>two</a></li>
      <li><a>three</a></li>
    </ul>
  </li>
</ul>

Answer 1

没有一个选择器语句可以匹配您的两个用例（不管是否支持父选择器）。例如，您必须在其中一个用例中包含一个额外的类，以满足您的要求，而您的选择器不会匹配所有.active元素。

假设以下用例：

有效的子菜单元素

<ul class="menu">
  <li class="active"><a>one</a></li>
  <li>
    <ul class="sub-menu">
      <li class="active"><a>two</a></li>
      <li><a>three</a></li>
    </ul>
  </li>
</ul>

没有有效的子菜单元素

<ul class="menu no-active-sub-menu">
  <li class="active"><a>one</a></li>
  <li>
    <ul class="sub-menu">
      <li><a>two</a></li>
      <li><a>three</a></li>
    </ul>
  </li>
</ul>

以下选择器可以使用：

.menu .sub-menu > .active,
.menu.no-active-sub-menu > .active {
     ...
}

Answer 2

ul > ul > li:first-child

但你应该将孩子UL嵌入li里面，在这种情况下：

ul > li > ul > li:first-child

Answer 3

您可以使用此

ul ul .active {...}

从提供的代码

开始

Answer 4

只需使用：last-child

ul .active:last-child {
    color: green;
}

Answer 5

正如其中一个贡献者所建议的那样，父母需要另一个类将它与子（ren）菜单项区分开来以使其工作。我正在发布我的解决方案，以防其他人面临类似的事情。

当父级是活动页面时，这是HTML：

<ul class="menu">
  <li><a>void</a></li>
  <li class="active">
    <a>one (parent, active page)</a>
    <ul class="sub-menu">
      <li><a>two (child)</a></li>
      <li><a>three (child)</a></li>
    </ul>
  </li>
</ul>

当父项的子菜单项是活动页面时，这是HTML：

<ul class="menu">
  <li><a>void</a></li>
  <li class="active page-parent">
    <a>one (parent)</a>
    <ul class="sub-menu">
      <li class="active"><a>two (child, active page)</a></li>
      <li><a>three (child)</a></li>
    </ul>
  </li>
</ul>

这些是我使用的规则：

/* Highlights the parent and any child
   menu item under the parent when the
   parent is the active page. */
ul.menu li.active a {
  color: red;
}

/* Keeps the children menu items normal 
   when the parent is the active page.
   Also keeps the parent normal when a
   child menu item is the active page. */
ul.menu li.active ul.sub-menu li a,
ul.menu li.active.page-parent a {
  color: black;
}

/* Highlights the child menu item that
   is active */
ul.menu li.active.page-parent ul.sub-menu li.active a {
  color: red;
}

如果在其子菜单项之一处于活动状态时使用唯一规则识别父状态，那么这肯定是直截了当的。显然，如果子项没有从父项继承“活动”状态，这会更容易，但我使用的菜单系统的行为如此处所述。感谢大家的贡献。

注意：我没有使用包含超过1个子菜单级别的菜单进行测试。

使用CSS选择Last of Type

5 个答案: