Html 如何删除包含特定子级的父级（媒体查询）

我很难找到解决这个问题的办法

我有一个名为

.mainCont

的类，用于每个主体部分

我遇到的问题是，当网站切换到响应性设计时，我可以将内容隐藏在父网站的内部，但留下一个空矩形，因为我无法隐藏父网站

如果我隐藏父对象，则所有内容都将隐藏；如果我隐藏子对象，则父对象将保持为空

（遗憾的是，我不想为此使用任何脚本，它必须是css/媒体查询。）

这是html

<div class="mainCont sideCont">
    <div class="gridBox"></div><!--
    --><div class="gridBox right"></div><!--
    --><div class="gridBox bottom"></div><!--
    --><div class="gridBox right bottom"></div>
</div>

这似乎不起作用，发现了

我唯一能想到的另一个选择是给容器一个唯一的id，但我宁愿不这样做。有什么想法吗

下面是查看结构如何的示例。（由于某些原因，小提琴不会显示my

.gridBox

的显示方式，但它必须与其他缺失的html相关。）

---

下面是一个示例，以查看它们的外观，但相关的代码在该小提琴中是孤立的。

从您的问题中不可能说出当

.gridBox

的所有实例从其父

.mainCont

元素中消失时会留下什么，但解决方案是将所有样式放在子元素上，因此，当它们消失时，

.mainCont

没有样式和尺寸。它仍将在DOM中，但不可见

如果你用CSS创建一个演示，我可以提供更多帮助

---

根据进一步的信息，您几乎肯定需要编写脚本。把这个放在任何地方：

<script>
jQuery(function($) {

    var myEls = $('.mainCont').filter(function () {
        return $(this).find('.gridBox').length === 0;
    });
    $(myEls).hide();

}):
</script>

jQuery（函数（$）{
var myEls=$（'.mainCont'）.filter（函数（）{
返回$（this.find（'.gridBox'）。长度==0；
});
$（myEls.hide（）；
}):

当然，您需要将其包装在window.resize函数中

---

是否要隐藏内部

.gridBox

？或者要隐藏第一个

.gridBox

？如果要隐藏第一个

.gridBox

，是否尝试过

。gridBox:first child{display:none；}

？我要隐藏它们以及它们的父项。我不能只向类.mainCont显示none，因为它的使用比刚才更多。您只想隐藏包含

.gridBox

的

.mainCont

的实例，对吗？CSS中没有父选择器，这是正确的。如果您可以访问HTML，我建议在每个类中添加一个在特定媒体查询中需要隐藏的类（在本例中为父类），示例：

hideinresponse

然后将该类作为显示的目标：none我刚刚在我的答案底部添加了一个提琴和live站点。我在几乎每个页面上都设置了这个选项，所以我需要一些东西来选择

.mainCont

，只要它包含

.gridBox

。啊。您最初没有指出

.mainCont

可能包含不在

.gridBox

实例中的内容。这使得我的回答不可行。我为我的困惑道歉，你有什么想法吗？除了使用脚本之外，向这个div添加唯一的id是我唯一的选择吗？您已经在页面中加载了jQuery。使用它。：-）请参阅我的最新答案。

<script>
jQuery(function($) {

    var myEls = $('.mainCont').filter(function () {
        return $(this).find('.gridBox').length === 0;
    });
    $(myEls).hide();

}):
</script>