Display:none 不显示 display:block at breakpoint答案

【问题标题】：Display:none not showing with display:block at breakpointDisplay:none 不显示 display:block at breakpoint
【发布时间】：2021-09-30 10:30:02
【问题描述】：

很抱歉，我知道以前有人问过它，但我就是不知道为什么它不起作用！
我在头部有元标记视口
我在宽视口（我从那里开始）有一个 display:none 图标（条形），当菜单消失时它应该以较小的尺寸显示。（菜单消失作品）我已将其设置为 display:block
我的 SCSS：

.fa-bars {
  display: none;
}
@media screen and (max-width: 600px) {
  .container {
    .fa-bars {
      display: block;
    }
  }
}

但它不起作用我不知道为什么试图用 *i* 选择它，与类，
我不知道请发送帮助。

【问题讨论】：

在 CSS 中你不能像这样嵌套选择器。你需要一些 CSS 预处理器，比如 SCSS。
如果回答对您有帮助，请标记为正确。
这可能是一个 css 优先级问题。在 chrome 检查器中观察结果。

标签： css media-queries breakpoints show-hide display

【解决方案1】：

在您的媒体查询中，这不起作用：

.container{
            .fa-bars{
                display: block;
            }
        }

应该是：

.container .fa-bars {
    display:block;
}

...如果 .fa-bars 在 .containers 中很重要。
否则就可以了：

.fa-bars {
    display:block;
}

【讨论】：

【解决方案2】：

你需要SCSS 来嵌套块，尝试这样做：

.fa-bars{
    display: none;
}
@media screen and (max-width:600px){

    .container.fa-bars{
            display: block;
    }

【讨论】：

【解决方案3】：

将两者都包含在媒体查询中并更正您的 css 语法。试试这个：

@media screen and (min-width:601px){
 .fa-bars{
   display: none;
  }
}
@media screen and (max-width:600px){
  .container .fa-bars{
      display: block;
  }
}

【讨论】：