如何使父 div 不呈现和可视化，但在媒体查询中保持子组件可视化？

Question

我想实现在父 div 的 dom 树中不显示任何内容，但要保持子 div 仅通过 css 可视化。

<div>                    // keep this div
  <div>                         // with media query make this div dissapear
    <div>                    // keep this div

     </div>
  </div>
</div>

Answer 1

如果您将第二个 div 设置为“显示：无；”在 css 中会消失，因此第三个 div 也会消失，因为它在第二个 div 的内部，如果你只想不可见，就不要在第二个 div 中添加任何 css，然后它会看起来不可见，如果你想看到你可以在他的 css 中添加一个 div “border: 1px solid red;”你会看到 div 占用的所有空间。

Answer 2

在父级上设置

display: none

会阻止显示子元素，我不认为有任何解决方法，但是

visibility

属性可以被孩子覆盖，所以在父级上设置

visibility: hidden

和

 visibility: visible

在孩子身上只会让父母不可见。但是，它仍会占用 DOM 中的空间，但您可以尝试定位和盒子模型，使其适用于您的用例。