将parent设置为display:none,将child设置为display:block

时间:2013-05-15 17:39:41

标签: css

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

将父元素的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解决方案?

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:2)

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

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

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