在一個響應式網站上工作，我想刪除某個元素，但是，我想子元素仍然顯示。

將父元素的CSS規則設置為顯示:無；移除該元素及其所有子元素。事件，如果我將子元素設置為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解決方案？

看起來你只是想在某些布局中去掉父對象的背景。為此，只需使用

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

這將刪除背景，邊界和任何父項上的陰影效果——就像它根本沒有被渲染一樣。

您可以嘗試將所有子級設置為display:none，然后用相關子級的display:block覆蓋它。示例:

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

這是一個10多年前的問題，所以現在人們會問:

#parent {
  display: contents;
}

https://developer . Mozilla . org/en-US/docs/Web/CSS/display # box