html 출력 단일 요소를 제외한 div 안의 모든 것을 숨기시겠습니까?




jquery html 출력 (2)

내가 다음과 같은 구조를 가지고 있다고 가정 해 봅시다 :

<div id="le-main-id" class="le-main-class">
  <div id="le-main-id1" class="le-main-class1"></div>
  <div id="le-main-id2" class="le-main-class2"></div>
  <div id="le-main-id3" class="le-main-class3"></div>
</div>

div 번호 2 (id = "le-main-id2"class = "le-main-class2")를 제외한 모든 것을 숨길 필요가 있지만 각 요소를 사용하고 display:none 사용할 수는 없습니다 display:none 내 실제 코드를 숨기려면 40 div를 얻었으므로 너무 오래 걸리고 엉망으로 끝날 수도 있습니다.

그래서 어떻게 두 번째 div 제외한 모든 숨길 수 있습니까?

이 같은

#le-main-id.le-main-class2 { /* visible:yes; all the others: no; */}
#le-main-id { /* visible:no; */}

업데이트 : 나는 답변을 따라 갔지만 작동하지 않습니다. 이것이 제가 시도하는 방법입니다 :

#lehometemplates > :not (.wpbdp-field-title) {
display: none !important;
}

업데이트 2 : 현재의 답변이 실제로 도움이된다고하더라도 100 % 질문을 공식화하지 않았다고 생각합니다. 내가 더 분명하게 만들자.

그것이 내가 가진 것이라고 가정 해보십시오.

<div id="le-main-id" class="le-main-class">
 <div id="1" class="1">
  <div id="2" class="2"> 
   <div id="3" class="3"> 
    <div id="4" class="4">

          <div id="le-main-id1" class="le-main-class1">
            <div id="le-main-id1" class="le-main-class1"></div>
            <div id="le-main-id2" class="le-main-class2"></div>
            <div id="le-main-id3" class="le-main-class3"></div>
          </div>

    </div>
   </div>
  </div>
 </div>
</div>

그래서 모든 것을 숨기고 div class="le-main-class2" 를 유지하려면 다음과 같은 것을 사용할 것입니다 ...

#le-main-id > :not (.le-main-class2)  {
    display: none !important;
    }

맞아?

이봐, 나는 가능하다면 모든 부모 div를 먼저 선택하고 싶지는 않다.

마지막 업데이트

마지막으로, 다음 코드가있는 경우 :

<div id="le-main-id" class="le-main-class">
 <div id="1" class="1">
  <div id="2" class="2"> 
   <div id="3" class="3"> 
    <div id="4" class="4">

          <div id="le-main-id111" class="le-main-class111">
            <div id="le-main-id1" class="le-main-class1"></div>
            <div id="le-main-id2" class="le-main-class2"></div>
            <div id="le-main-id3" class="le-main-class3"></div>
          </div>

    </div>
   </div>
  </div>
 </div>
</div>

그럼 내가해야 할 일은 :

.le-main-class .le-main-class111 > :not(.le-main-class2) {
  display: none;
}

이렇게하면 .le-main-class2 제외하고 .le-main-class2 .le-main-class.le-main-class111 의 모든 자식을 숨길 수 있습니다.


CSS3 :not selector는이 경우에 해당합니다.

.p > div:not(#c2) {
  display: none;
}
<div class="p">
  <div id="c1">1</div>
  <div id="c2">2</div>
  <div id="c3">3</div>
</div>


다음과 같이 사용할 수 있습니다 :not() pseudo-class :

#le-main-id > :not(.le-main-class2) { display: none; }

그것은 주목할 가치가 있습니다 :not() 는 IE9 +에서 지원됩니다 .

기존 웹 브라우저의 경우 모든 하위 <div> 숨기고 특정 것에 대한 선언을 재정의 할 수 있습니다.

#le-main-id > div { display: none; }
#le-main-id > .le-main-class2 { display: block; }

최신 정보

새 업데이트 에 따르면 실제 마크 업은 이전에 게시 된 마크 업보다 복잡합니다.

중첩 된 요소는 다른 내용을 가질 수 있으므로 , .le-main-class2 제외한 #le-main-id 안의 모든 것을 숨기는 한 가지 올바른 방법은 주 컨테이너에 visibility: hidden 을 추가하고 .le-main-class2visible 것으로 다시 설정하는 .le-main-class2 .

그러나 visibility 은 점유 공간을 떠난다. 그러나 main-container2에 line-height: 0 을 추가하고 .le-main-class2 에서 값을 1.2 다시 설정하면 문제를 해결할 수 있습니다.

온라인 예 .

* { margin: 0; /* just for demo */ }

#le-main-id {
  visibility: hidden;
  line-height: 0;
  
  background-color: gold;
}

#le-main-id img {
  display: none; /* to hide the images */
}

#le-main-id .le-main-class2 {
  visibility: visible;
  line-height: 1.2;
  
  background-color: orange;
}
<div id="le-main-id" class="le-main-class">
  .le-main-class
 <div id="1" class="1"> id="1" class="1"
  <div id="2" class="2"> id="2" class="2"
   <div id="3" class="3"> id="3" class="3"
    <div id="4" class="4"> id="4" class="4"
      <img src="http://placehold.it/100" alt="">

          <div id="le-main-id1" class="le-main-class1">
            .le-main-class1
            <div id="le-main-id1" class="le-main-class1">.le-main-class1</div>
            <div id="le-main-id2" class="le-main-class2">.le-main-class2</div>
            <div id="le-main-id3" class="le-main-class3">.le-main-class3</div>
          </div>

    </div>
   </div>
  </div>
 </div>
</div>

<p>
  The rest of the document....
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis soluta in vel libero dicta similique dolore modi quidem deserunt numquam neque, quo excepturi atque autem, aspernatur consequuntur mollitia, officia aut.
</p>





css-selectors