如何使用CSS选择“表兄弟”元素[重复]

Answer 1

尝试

:has

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>

Firefox 自 2923 年 12 月 19 日起已支持

:has

。

Answer 2

Shuo 击败了我，但你可以使用 :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>

Answer 3

Shuo 的第一个答案与我的相同，但我将把它留在这里，以防有人想更多地了解该解决方案的工作原理。

这可以通过使用最近的 :has() psuedo-class 来完成。

这里有一些简单的 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>

我使用

background: red;

因为显示某些内容比不显示某些内容更容易，所以你只需要将其替换为

display: none;

那么，它是如何工作的？

首先，我们无法在 CSS 中选择父级，因此我们需要通过兄弟级进行操作。这意味着到

.HideMenu

元素的路线必须是从

a

到其同级

ul

，然后是

li

。这就是我们编写

a:has(+ ul.accordion-menu li.HideMenu)

选择器的原因。

通过上述内容，我们已经通过同级元素与所需元素建立了关系以切换子菜单。所需要做的就是编写下一个选择器来定位特定的后代。

很棒吗？正确的！好吧，请注意 -- 有一个问题：Firefox 不支持此解决方案。

为了能够在 Firefox 中执行相同的操作，您需要自己编写 JS/JQuery 代码来添加对此功能的支持。