使用 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>后运行。如果在运行脚本后添加它们，则它们不会应用该类(您需要再次运行脚本，以便它们应用)。