我有以下(簡化的)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>

我試圖用CSS來隱藏。子菜單-切換-同級(jí)為ul li.HideMenu時(shí)的容器跨度

我已經(jīng)能夠使用jQuery代碼做到這一點(diǎn) 李副艦長。hide menu’)。父級(jí)(' ul ')。兄弟姐妹(' a ')。孩子(’。子菜單-切換-容器)。hide()；但是這對于我的項(xiàng)目來說不是最佳的，我更愿意使用CSS來完成這項(xiàng)工作。

我的嘗試包括

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

但這不起作用。

感謝任何幫助。

嘗試:有

a:has(+ ul.accordion-menu li.HideMenu) .submenu-toggle-container {
  display: none;
}

<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>

爍比我搶先了一步，但你可以用:has選擇器來完成它:

/*
  select .submenu-toggle-container children of
  .tree-node that has a li.HideMenu child
*/
.tree-node:has(ul li.HideMenu) .submenu-toggle-container {
  display: none;
}

<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>

這里的第一個(gè)答案是由朔和我一樣，但我會(huì)把它留在這里，以防有人想了解更多關(guān)于這個(gè)解決方案是如何工作的。

這可以通過使用最近的:has()偽類來實(shí)現(xiàn)。

這里有一小段CSS來展示它是如何工作的:

li.tree-node a:has(+ ul.accordion-menu li.HideMenu) .submenu-toggle-container {
  background: red;
}

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