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

6psbrbz9  于 2023-06-20  发布在  其他
关注(0)|答案(3)|浏览(101)

此问题已在此处有答案

Is there a "previous sibling" selector?(33答案)
Is there a CSS parent selector?(33个回答)
5天前关闭。
我有以下(简化的)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来隐藏.submenu-toggle-container跨度时,兄弟是ul li.HideMenu
我已经能够使用jQuery代码$('ul.sidenav li.HideMenu').parent('ul').siblings('a').children('.submenu-toggle-container').hide();来完成这项工作,但这对我的项目来说不是最佳的,我宁愿使用CSS来完成这项工作。
我的尝试包括

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

但这行不通。
任何帮助都很感激。

vfh0ocws

vfh0ocws1#

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

如果layout.css.has-selector.enabled是fasle,firefox不支持。

7nbnzgx9

7nbnzgx92#

Shuo beat me to it但是你可以用:has selector来实现:

/*
  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>
oxalkeyp

oxalkeyp3#

Shuo的first answer here和我的一样,但我将把它留在这里,以防有人想了解更多关于这个解决方案的工作原理。
这可以通过使用最新的:has()伪类来实现。
这里有一个快速的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)选择器的原因。
通过上面的步骤,我们已经建立了通过兄弟元素到所需元素的关系,以切换子菜单。所需要做的就是编写下一个选择器来定位特定的decendant。
很好?对!好吧,小心--------------------------------------------------------Firefox不支持此解决方案。**
为了能够在Firefox中做同样的事情,您需要编写JS/JQuery代码来添加对该功能的支持。

相关问题