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>元素的唯一有效子元素是<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>添加到页面后，必须在上运行上述脚本。如果您在运行脚本后添加了它们，它们将不会应用该类（您需要再次运行该脚本才能这样做）。

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

1 个答案: