Question

在响应式网站上工作，我想删除某个元素，但是，我希望仍然显示子元素。

将父元素的CSS规则设置为display：none;删除该元素和所有子元素。如果我将子元素设置为display：block;它仍然没有出现在网站上。

这样的事情：

HTML：

<div id="parent">
<div id="child">Some text.</div>
</div>

CSS：

#parent {
display:block;
width:500px;
height:200px;
background:blue;
}

#child {
display: inline-block;
padding:20px 5px;
background: red url(someimage.jpg);
}

@media only screen 
and (max-device-width : 700px) {

#parent {
/* code that makes the browser disregard the height of this div and not display its background */
}

#child
/* the child is still displayed */
    }
}

什么是正确的CSS解决方案？

Answer 1

您可以尝试将所有孩子设置为display:none，然后使用相关孩子的display:block覆盖它。例如：

#parent>* {display:none}
#parent>#child {display:block}

Answer 2

看起来您只想在某些布局中删除父级的背景。要做到这一点，只需使用

#knockout {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;        
    padding: 0;
}

这将删除父项目的背景，边框和任何阴影效果 - 就好像它根本没有渲染一样。

将parent设置为display：none，将child设置为display：block

2 个答案: