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

Question

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

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

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

Answer 1

:has目前 Firefox 不支持伪类。在这种情况下，您可以尝试同级选择器，例如+或~。

例如 ：

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 文件。