求助：基于@media查询控制flex布局<li>元素的显示隐藏

问题到底出在哪？ #

你看，当你给#nav-content>li加上display: flex时，这个选择器的权重是「ID选择器 + 元素选择器」（权重值101），而你用来控制首尾

• 默认情况下，#nav-content>li的display: flex会覆盖#nav-left的display: none，导致首尾粉色
• 默认就显示出来了；
• 媒体查询里的设置自然也被覆盖，完全达不到你“小屏幕才显示首尾”的需求。

几种靠谱的解决方案 #

方案1：用更具体的选择器锁定首尾

直接调整CSS规则，给首尾

* {
  margin: 0;
  padding: 0;
  color: black;
}

#nav-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  border: solid 2px black;
}

/* 给所有<li>设置flex布局 */
#nav-content>li {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

#nav-content > li:hover {
  background-color: grey;
}

/* 用「#nav-content>#nav-left」这种同权重选择器隐藏首尾<li> */
#nav-content>#nav-left, #nav-content>#nav-right {
  display: none;
  background-color: pink;
}

/* 媒体查询里也用同样的具体选择器设置显示 */
@media (max-width: 500px) {
  #nav-content>#nav-left, #nav-content>#nav-right {
    display: flex;
  }
}

方案2：给需要flex的

单独加类

如果不想纠结权重，可以给需要排版图标和文本的<li>（也就是op1-op4）加个类，比如nav-item，只给这个类设置flex布局，首尾

修改后的HTML：

<nav id="navigation">
  <ul id="nav-content">
    <li id="nav-left"></li>
    <li id="op1" class="nav-item"><img src="https://via.placeholder.com/30x30"><h2>Option1</h2></li>
    <li id="op2" class="nav-item"><img src="https://via.placeholder.com/30x30"><h2>Option2</h2></li>
    <li id="op3" class="nav-item"><img src="https://via.placeholder.com/30x30"><h2>Option3</h2></li>
    <li id="op4" class="nav-item"><img src="https://via.placeholder.com/30x30"><h2>Option4</h2></li>
    <li id="nav-right"></li>
  </ul>
</nav>

修改后的CSS：

* {
  margin: 0;
  padding: 0;
  color: black;
}

#nav-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  border: solid 2px black;
}

/* 只给带nav-item类的<li>设置flex布局 */
#nav-content>.nav-item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

#nav-content > li:hover {
  background-color: grey;
}

#nav-left, #nav-right {
  display: none;
  background-color: pink;
}

@media (max-width: 500px) {
  #nav-left, #nav-right {
    display: flex;
  }
}

方案3：用!important（不推荐）

虽然可以给#nav-left/#nav-right的display属性加!important强制覆盖，但这会破坏CSS的权重规则，后期改代码很容易踩坑，所以只建议应急用：

#nav-left, #nav-right {
  display: none !important;
  background-color: pink;
}

@media (max-width: 500px) {
  #nav-left, #nav-right {
    display: flex !important;
  }
}

为啥这些方法管用？ #

CSS选择器的权重优先级是：ID选择器(100) > 类/伪类选择器(10) > 元素选择器(1)。当权重相同时，后面的规则会覆盖前面的。方案1让首尾

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