我正在为我的一个朋友做一个小网站,正在使用:has个伪类.然而,我知道Firefox上没有支持(除非有人打开了标志),所以有解决办法吗?

从本质上讲,我编写的是一个汉堡菜单,但供没有使用Java的人使用(80%的目标受众禁用了长故事),而且我不想使用SPAN.看了一段来自Web Dev Simple的视频后,我看到了input["checkbox"]的用法,但由于没有可用的:has伪类,我有点困惑.

我试着用input:checked::before来调整顶栏,用input:checked::after来调整底部(点击时旋转),但失败得很惨!

推荐答案

firefox 目前不支持:has伪类. 在这种情况下,您可以try 使用+~等同级 Select 器.

例如:

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

Css相关问答推荐

如何获得特定位置的Divs以根据浏览器宽度正确调整大小

Vue3日期 Select 器:禁用向左和向右箭头

CSS媒体查询不显示所需的输出

try 在Jekyll中使用多个SCSS文件时出错

如何在页面顶部创建固定横幅,并在其下方设置滚动条?

仅 Select 嵌套 div 的底部,而不知道它们的嵌套程度

包含 N 个 React 组件的砌体网格

不明白为什么 div 不均匀并且不填满页面

如何使用来自单独模块的代码将自定义标头插入到使用 DT Shiny 呈现的表中?

2 列 UL,右列中的列表项数量为奇数?

使用 React-Router 和 Outlet 时如何确保内容保持在下方

卡在 CSS 中的grid-template-columns中

Adobe Illustrator 删除我在 svg 图像上的类名.我怎样才能防止这种情况?

删除 IE10 Select 元素箭头

Bootstrap:在列之间添加边距/填充空间

创建 CSS 全局变量:样式表主题管理

如何在 javascript 中获取 HTML 元素的样式值?

CSS3 box-shadow:inset 可以只做一侧或两侧吗?喜欢边界顶部?

css 中的 clearfix 类有什么作用?

如何水平对齐 span 或 div?