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

当sibling 项为ul li.HideMenu时,我try 使用css来隐藏.submenu-toggle-container范围.

我已经能够使用jQuery代码来实现这一点 $('ul.sidenav li.HideMenu').parent('ul').siblings('a').children('.submenu-toggle-container').hide();但这对我的项目来说并不是最优的,我更愿意使用CSS来实现这一点.

我的try 包括

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

但这并不管用.

如有任何帮助,我们不胜感激.

推荐答案

试一试: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支持.

enter image description here

Html相关问答推荐

角|将动态html属性添加到子组件

D3.js—分组条形图—更新输入数据时出错

子元素以元素X开始和结束的元素的XPath?

仅向上扩展并以最大高度滚动的Div

类型';联系人组件';上不存在属性';name FormControl';

HTML中的ARIA标签:在元素内部还是外部?(&Q;

Django HTML标记-Merge for Loop with Conditional语句

为什么字体大小而不是 colored颜色 属性适用于元素?

为什么我的 html 对话框在 React 中没有渲染在我的内容之上?

CSS "overflow"不能显示整个单词

使用flex wrap时,如何设置另一个元素的宽度与换行后的元素对齐?

本地和在jsfiddle上页面工作正常,但在GitHub上无法运行.

CSS 随着内容宽度的增加而减少填充

如何并排放置
的定义列表,但如果
变长,
会向下移动?

font awesome 的 CDN/CSS 如何工作?

使用 Selenium for Python 在网站上查找类名称中包含换行符的元素

如何在 bootstrap 程序导航栏中居中搜索图标

有没有办法使用 CSS border-radius 创建 HTML 视频标签的三角形显示?

为什么 `html` 上的 overflow: hidden 将滚动框移动到正文?

以 HTML 格式显示的 LaTeX 表格