css - 使用 Sass 将样式应用于下一个兄弟为空的元素

Question

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

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

假设我想隐藏 <LI class="label">什么时候<UL class="submenu">是空的。这可以用 CSS/Sass 实现吗？

我已经尝试了以下示例的多种变体，但没有成功。

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

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

Answer 1

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

<ul> 的唯一有效 child 元素是 <li>秒。因此，为了有效，你的内心 <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>后运行到你的页面。如果您在运行脚本后添加它们，它们将不会应用类(您需要再次运行脚本，它们才会应用)。