CSS - 使用媒体查询从其父元素中删除元素

Question

在 CSS 中使用媒体查询，是否可以从其父元素中删除元素，如下所示：

默认：

<div id="parent">
<div id="child"></div>
</div>

使用媒体查询：

<div id="parent"></div>
<div id="child"></div>

感谢您的任何建议。

Answer 1

从技术上讲，没有。CSS 媒体查询不可能改变 DOM 顺序（Flexorder可以做类似的事情，也许它也可以提供帮助）。

但是： 您可以以不同的方式实现所需的效果。通过克隆该项目（这样您就可以将其放入一次，一次在父项之外），然后显示/隐藏相应的一项，您将模仿您正在寻找的效果。

例子：

<div class="parent">
    <div class="child child-inner"></div>
</div>
<div class="child child-outer"></div>

现在只需在样式之间切换

.child-inner { display: block; }
.child-outer { display: none; }

@media only screen and (max-width: 900px) {
    .child-inner { display: none; }
    .child-outer { display: block; }
}