Firefox 中 :has 的解决方法（不使用 JavaScript）

Question

我正在为我的一个朋友开发一个小网站，并使用 :has 伪类。但是，我知道 FireFox 不支持（除非有人打开了该标志），所以有解决方法吗？

本质上，我正在编写一个汉堡菜单，但供没有 JavaScript 的人使用（80% 的目标受众禁用 JavaScript - 长话短说），而且我不想使用 span。观看了 Web Dev Simplified 的视频后，我看到了 input["checkbox"] 的使用，但是，没有 :has 伪类可用，我有点卡住了。

我尝试使用诸如 input:checked::before 之类的东西来调整顶部栏，并使用 input:checked::after 来调整底部栏（在点击时旋转），但这惨败了！

任何帮助都会令人难以置信，谢谢！

Answer 1

目前 Firefox 不支持

:has

伪类。 在这种情况下，您可以尝试使用兄弟选择器，例如

+

或

~

。

例如：

HTML :

<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">&#9776;</label>
<nav id="menu">
   // menu items
</nav>

CSS :

#menu {
  display: none;
}

#menu-toggle:checked + label + #menu {
  display: block; /* Can show menus if checkbox is checked */
}

您可以根据您的具体设计和要求构建CSS文件。 如果您仍有问题，请告诉我。