重寫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> 

因此，在這個例子中，我要顯示＃項目3，但#parent的休息和它的孩子們不顯示。我知道有些解決方法涉及到更改每個單獨項目的CSS，但我正在處理幾十個項目，並且想知道這是否可能，即使通過JS。提前致謝。

Answer 1

你爲什麼不改用：

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

這樣，所有P孩在你的父母將無法顯示，但具體項目3＃意志。

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