如何在嵌套列表中用CSS样式化最后一个带.active类的li元素

需求与约束 #

• 网站导航为多层嵌套列表结构，当前页面对应的<li>会被添加.active类，同时该元素的所有上级父<li>也会自动添加.active类
• 需要单独样式化最内层的那个带.active类的<li>（即对应当前打开的具体页面的元素）
• 列表的层级深度、元素数量不固定，方案需具备通用性
• 基于Omeka S系统，无法使用JavaScript或修改HTML结构，仅能通过纯CSS实现

菜单结构示例 #

默认状态的导航结构：

<ul>
  <li>
    <a href="">Introduction</a>
  </li>
  <li>
    <a href="">level 1</a>
    <ul>
      <li>
        <a href="">subpage</a>
        <ul>
          <li>
            <a href="">sub-subpage</a>
            <ul>
              <li>
                <a href="">sub-sub-subpage-a</a>
              </li>
              <li>
                <a href="">sub-sub-subpage-b</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

当处于sub-sub-subpage-b页面时，导航的结构（带.active类）：

<ul>
  <li>
    <a href="">Introduction</a>
  </li>
  <li class="active">
    <a href="">level 1</a>
    <ul>
      <li class="active">
        <a href="">subpage</a>
        <ul>
          <li class="active">
            <a href="">sub-subpage</a>
            <ul>
              <li>
                <a href="">sub-sub-subpage-a</a>
              </li>
              <li class="active">
                <a href="">sub-sub-subpage-b</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

已尝试方案的问题 #

• 使用li.active:last-of-type：仅能选中同层级下最后一个带.active的<li>，无法定位到最内层的目标元素
• 使用.active > a:only-child：仅当目标元素是父元素的唯一子元素时生效，不具备通用性

解决方案 #

利用CSS的:has()选择器，定位到自身带.active类，但后代中没有任何带.active类元素的<li>，这正是我们需要的最内层当前页元素：

样式化目标<li>本身 #

li.active:not(:has(.active)) {
  /* 自定义样式示例 */
  color: #ff0000;
  font-weight: bold;
}

样式化目标<li>内的<a>标签 #

如果需要样式化链接文本，可使用：

li.active:not(:has(.active)) > a {
  color: #ff0000;
  font-weight: bold;
}

说明 #

• :has()是CSS选择器 Level 4 的特性，目前现代主流浏览器（Chrome、Edge、Safari 15.4+、Firefox 121+）均已支持
• 该方案无需依赖固定的层级结构，能自动适配任意深度的嵌套导航，完全符合需求

内容的提问来源于stack exchange，提问作者a_person