如何用CSS实现当存在li.HideMenu时隐藏.submenu-toggle-container

现有简化HTML结构如下：

<ul class="sidenav">
    <li class="tree-node">
        <a href="url">
            <span class="submenu-toggle-container">Text</span>
        </a>
        <ul class="accordion-menu">
            <li class="HideMenu">.......</li>
        </ul>
    </li>
    <li class="tree-node">...</li>
</ul>

需求：当.tree-node下的ul.accordion-menu包含li.HideMenu元素时，隐藏该.tree-node下a标签内的.submenu-toggle-container元素。

已经用jQuery实现了这个效果：

$('ul.sidenav li.HideMenu').parent('ul').siblings('a').children('.submenu-toggle-container').hide();

但项目更倾向于用纯CSS实现，尝试的下面这段CSS没生效：

ul.sidenav li.HideMenu ~ ul a .submenu-toggle-container {
  display: none;
}

求可行的CSS解决方案。

你之前的CSS失效是因为选择器逻辑完全错误：li.HideMenu ~ ul是找和li.HideMenu同级的ul，但实际结构里li.HideMenu是在ul.accordion-menu内部，而且要控制的a是ul.accordion-menu的同级元素，属于共同父级.tree-node的子元素。

现在主流现代浏览器都支持CSS的:has()选择器（能选中包含指定后代的父元素），用它就能直接实现需求：

/* 选中包含 .accordion-menu li.HideMenu 的 .tree-node，隐藏其下的 .submenu-toggle-container */
ul.sidenav li.tree-node:has(.accordion-menu li.HideMenu) a .submenu-toggle-container {
  display: none;
}

兼容性说明 #

:has()已经被Chrome、Edge、Safari等主流现代浏览器支持，要是需要兼容旧版Firefox，得先开启layout.css.has-selector.enabled配置项（Firefox 121及以上版本默认支持）。

如果必须兼容完全不支持:has()的老环境，只能调整HTML结构配合CSS：给包含HideMenu的.tree-node手动加个额外类名，比如has-hide-menu：

1. 修改后的HTML：

<li class="tree-node has-hide-menu">
    <a href="url">
        <span class="submenu-toggle-container">Text</span>
    </a>
    <ul class="accordion-menu">
        <li class="HideMenu">.......</li>
    </ul>
</li>

2. 对应的CSS：

ul.sidenav li.tree-node.has-hide-menu a .submenu-toggle-container {
  display: none;
}

这种方法需要在生成HTML时或者通过JS（比如页面加载时判断后添加类）配合，但属于纯CSS控制显示的方案。

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