css - Set parent to display:none, set child to display:block

Question

Working on a responsive website, I want to remove a certain element, however, I want the child element to still be displayed.

Setting the CSS rule for parent element to display:none; removes that element and all the children. Event if I set the child element to display:block; it still doesn't appear on the site.

Something like this:

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 */
    }
}

What would be the proper CSS solution?

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;
}

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