仅用CSS实现：存在active类时隐藏非active元素

这个需求刚好可以用CSS的:has()伪类来实现，完美匹配你要的「仅当列表中存在.active项时，才隐藏非选中项」的逻辑，不需要额外修改HTML结构，也不用复杂的JS。

核心CSS代码 #

/* 仅当列表容器内存在.active的列表项时，隐藏所有非active的li */
ul:has(li.active) li:not(.active) {
  display: none;
}

原理说明 #

• ul:has(li.active) 是关键：它会仅选中那些包含至少一个带.active类的<li>的<ul>容器
• 只有当这个条件满足时，后面的li:not(.active)选择器才会生效，把非选中项隐藏
• 如果列表里没有任何.active的项，这条CSS规则完全不会触发，所有<li class="normal">都会正常显示，正好符合你的初始状态要求

兼容性兜底方案（针对旧浏览器） #

如果需要兼容不支持:has()的旧版浏览器（比如Firefox 120及以下、旧版Chrome），可以用一小段JavaScript来辅助标记容器状态：

// 检测列表是否包含active项，给容器添加标记类
const list = document.querySelector('ul');
if (list.querySelector('li.active')) {
  list.classList.add('has-active-item');
}

然后对应的CSS改成：

ul.has-active-item li:not(.active) {
  display: none;
}

为什么你的初始思路不行？ #

你一开始想到的li:not(.active){display:none;}会无条件隐藏所有非active项——哪怕列表里根本没有active项，所有li都会被隐藏，这显然不符合你“无active时正常显示”的要求。而我们上面的方案通过父容器的条件判断，完美解决了这个问题。

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