親要素のCSSスタイルを他の要素に影響を与えずに変更する

Question

"display：none"特性を持つ親要素に含まれる要素を表示する方法を知りたいと思います。しかし、その親の下にある他の子供はそのままにしておいてください。ここでは簡単な例です：

<div id="parent"> 
    <p id="item1">Item should show</p> 
    <p id="item2">Item should show</p> 
    <p id="item3">Item should not show</p> 
<div><!--/parent--> 

<style> 
    #parent {display: none;} 
    #item3 {display: block !important;} 
</style> 

したがって、この例では、私は＃1 ITEM3が表示されるようにしたいが、#parentの残りの部分とその子は表示しないように。私は個々のアイテムのCSSを変更することを含む回避策があることを知っていますが、私はここで何十ものアイテムを扱っています。前もって感謝します。

#parent>p{display:none;} 
#item3{display:block;} 

この方法では、あなたの親で全てのpの子供が表示されませんが、特定の＃1 ITEM3は以下となります。

Answer 1

なぜあなたは代わりに使用していません。

Answer 2

親アイテムを非表示にすると、子アイテムを表示できません。

不要な子アイテムを非表示にし、表示したい子アイテムを表示しないのはなぜですか。

<div id="parent"> 
<p id="item1" class="hide">Item should show</p> 
<p id="item2" class="hide">Item should show</p> 
<p id="item3" class="show">Item should not show</p> 

そして、あなたのCSSになります。

.hide{display:none;} 
.show{display:block; }