如何用纯CSS为嵌套列表中最后一个.active类的li元素设置样式？

解决方案 #

由于上级父级<li>都会被添加.active类，但只有当前页面对应的最底层<li>，其后代元素中没有其他带.active类的元素。可以利用这个特性精准选中目标元素：

方法1：使用:has()伪类（推荐，现代浏览器支持） #

/* 可选：给所有.active的li设置基础高亮样式 */
li.active {
  background-color: #f0f0f0;
}

/* 选中没有子.active元素的.active li（即当前页面对应的项） */
li.active:not(:has(.active)) {
  /* 这里设置专属样式，比如： */
  font-weight: bold;
  color: #e63946;
  background-color: #ffebee;
}

方法2：兼容旧版浏览器的写法 #

如果需要兼容不支持:has()的旧浏览器，可以通过样式覆盖实现：

/* 先给所有.active的li设置基础样式 */
li.active {
  font-weight: bold;
  color: #e63946;
}

/* 重置嵌套在.active里的.active li的样式（即上级父项） */
li.active li.active {
  font-weight: normal;
  color: inherit;
}

原理说明 #

• 方法1中，:has(.active)会匹配包含子.active元素的li，not(:has(.active))则排除这些上级项，只保留最底层的、没有子.active的当前页面对应li。
• 方法2的逻辑是先给所有.activeli加样式，再通过后代选择器覆盖上级父项的样式，最终只有最底层的目标li保留自定义样式。

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