다른 요소에 영향을주지 않고 부모 요소의 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를 통해 가능할 지 궁금합니다. 미리 감사드립니다.

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

이 방법은 부모의 모든 페이지의 아이들이 표시되지 않습니다,하지만 특정 #의 항목 3이됩니다

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