css - 使用 CSS 选择最后一个类型

Question

给定下面的 HTML，什么 CSS 规则会选择并且只选择说两个的行？

<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

正如其中一位贡献者所建议的那样，父级需要另一个类将其与子（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 个子菜单级别的菜单对此进行测试。

Answer 5

只需使用 :last-child

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