使用Sass将样式应用于具有空的下一个兄弟的元素

Question

是否可以根据元素的下一个兄弟是否为空来设置元素的样式。

    <ul class="menu">
        <li class="label">Hide me when submenu is empty</li>
        <ul class="submenu"></ul>
    </ul>

假设我想在<UL class="submenu">为空时隐藏<LI class="label"> 。 CSS / Sass有可能吗？

我已尝试过以下示例的几种变体，但没有任何运气。

    ul {
        > li {
            ~ ul:empty {
                display: none;
            }
        }
    }

如果可能的话，我宁愿坚持使用CSS解决方案。

Answer 1

标记的第一个主要问题是它无效。

<ul>元素的唯一有效子元素是<li> s。 因此，为了有效，您的内部<ul>必须位于<li> 。 它不能是另一个<ul>的直接孩子。

但是，即使假设有效的标记：

<ul class="menu">
  <li class="label">Hide me when submenu is empty
    <ul class="submenu"></ul>
  </li>
</ul>

...你试图做的事情是单独使用CSS是不可能的，因为CSS解析器永远不会倒退（或者向上，就此而言）。

如果单独使用CSS无法做到这一点，那么仅使用SCSS就无法做到这一点，因为SCSS是CSS语法糖。

---

以下是JavaScript解决方案的外观：

 const uls = document.querySelectorAll('ul'); [...uls].forEach((ul) => { const emptyChildUls = ul.querySelectorAll('ul:empty'); [...emptyChildUls].forEach((emptyUl) => { emptyUl.parentElement.classList.add('hasEmptyList'); }) }); 

 ul li.hasEmptyList { display: none; } 

 <ul> <li>Hide me when submenu is empty <ul></ul> </li> </ul> 

显然，您可以将应用的类名更改为您想要的任何名称。 我选择添加一个类而不是对DOM元素执行直接更改，这样您仍然可以通过CSS保持一定程度的控制。

完成将<ul>添加到页面后，必须运行上述脚本。 如果在运行脚本后添加它们，它们将不会应用该类（您需要再次运行脚本，以便它们执行）。