屏幕宽度小于阈值时，如何仅隐藏无内容的第二个容器？

你现在的问题在于媒体查询里对第二个容器的隐藏规则太宽泛了——不管它有没有内容都会被隐藏。要实现“仅当第二个容器无任何子元素时才隐藏”的需求，CSS的:empty伪类正好能帮你搞定！

修改后的完整代码 #

CSS部分

#parent { height: 50px; display: flex; }
.container { flex: 1; }
#c1 { background: red; }
#c2 { background: green; }
#c3 { background: blue; }
@media (max-width: 500px) {
  .container:first-child { display: none; }
  /* 仅当第二个容器为空时触发隐藏 */
  .container:nth-child(2):empty { display: none; }
}

HTML部分

<div id="parent">
  <div class="container" id="c1"></div>
  <!-- 这个空的c2在小屏幕会被隐藏 -->
  <div class="container" id="c2"></div>
  <div class="container" id="c3"><p>我是有内容的容器</p></div>
</div>

关键说明 #

• :empty伪类的作用是匹配完全没有任何内容的元素：包括没有文本、没有子元素，甚至连空格或换行都不能有。如果你的第二个容器里有空白字符，它就不会被判定为empty，自然也不会被隐藏。
• 如果需要允许容器内存在空白字符仍判定为空，纯CSS无法直接实现，可能需要借助JavaScript辅助判断，但大多数业务场景下，:empty已经能满足需求。

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