使用Media Query隐藏元素失效求助（基于Bootstrap）

嘿，我帮你排查了一下问题，你的媒体查询没生效大概率是CSS层叠顺序或者优先级的问题，下面给你具体的解决步骤：

问题核心原因 #

你当前把媒体查询代码写在了.icon-bar基础样式的前面，虽然语法没问题，但浏览器解析CSS是从上到下执行的，同权重的样式规则中，后面的会覆盖前面的。这种顺序下，媒体查询的隐藏规则可能被后续的基础样式干扰，导致无法生效。

解决方案1：调整CSS代码顺序 #

把媒体查询移到所有.icon-bar相关样式的后面，确保屏幕宽度触发条件时，隐藏规则能正确应用：

/* 先写.icon-bar的基础样式 */
.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.content {
  margin-left: 75px;
  font-size: 30px;
}

/* 媒体查询放在最后 */
@media screen and (max-width: 600px) {
  .icon-bar {
    display: none;
  }
}

解决方案2：提高选择器权重（若Bootstrap样式干扰） #

如果调整顺序后还是不生效，可能是Bootstrap的全局样式覆盖了你的规则，这时候可以通过提高选择器权重来解决：

@media screen and (max-width: 600px) {
  /* 增加body父选择器，提升权重 */
  body .icon-bar {
    display: none;
  }
}

额外注意事项 #

确保你的自定义CSS文件是在Bootstrap CSS之后引入的，这样你的样式才能优先覆盖Bootstrap的默认规则，比如HTML中的引入顺序：

<!-- 先引入Bootstrap CSS -->
<link rel="stylesheet" href="你的Bootstrap文件路径">
<!-- 再引入自定义CSS -->
<link rel="stylesheet" href="你的自定义CSS文件路径">

你还可以打开浏览器开发者工具（按F12），在元素面板中查看.icon-bar的样式，看看display: none是否被应用，或者是否被其他样式划掉（划掉代表被覆盖），能更直观地定位问题。

内容的提问来源于stack exchange，提问作者Victor Johnson