提问人：abberto 提问时间：10/10/2023 最后编辑：Stephen Ostermillerabberto 更新时间：10/16/2023 访问量：132
Firefox 中 ：has 的解决方法（不使用 JavaScript）[已关闭]
Workaround for :has in Firefox (not using JavaScript) [closed]
问：
我正在为我的一个朋友开发一个小网站，并且正在使用伪类。但是，我知道Firefox不支持（除非有人打开了标志），那么有解决方法吗？:has
从本质上讲，我正在编写一个汉堡菜单，但供没有 JavaScript 的人使用（80% 的目标受众禁用 JavaScript - 长话短说），我不想使用 span。在观看了 Web Dev Simplified 的视频后，我看到了它的用法，但是，如果没有可用的伪类，我有点卡住了。input["checkbox"]:has
我尝试只使用类似的东西来调整顶部栏和底部（点击时旋转），但这惨遭失败！input:checked::beforeinput:checked::after
答：
5赞
David Teo
10/10/2023
#1
Firefox 目前不支持伪类。
在这种情况下，您可以尝试使用同级选择器，例如 或 。:has+~
例如：
HTML :
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">☰</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 文件。
评论
::before或者伪元素不能用于 替换的元素 阅读文档！developer.mozilla.org/en-US/docs/Web/CSS/::after::after