1

レスポンシブ Web サイトで作業していて、特定の要素を削除したいのですが、子要素は引き続き表示したいです。

親要素の 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 ソリューションは何でしょうか?

4

2 に答える 2

2

すべての子を に設定してから、関連する子display:noneの で上書きすることができます。display:block例：

#parent>* {display:none}
#parent>#child {display:block}
于 2013-05-15T17:41:48.027 に答える
2

特定のレイアウトで親の背景をノックアウトしたいだけのようです。それを行うには、単に使用します

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

これにより、親アイテムの背景、境界線、および影の効果が削除されます-まったくレンダリングされていないかのように。

于 2013-05-15T17:58:47.530 に答える