Bộ chọn CSS con ngay lập tức

Question

#main .container > div:not(.sites):not(.default) { 
    display: none; 
} 

Thẻ <h1> hiển thị khi thẻ div bên dưới yui-ge bị ẩn. Nếu> chỉ áp dụng cho trẻ em ngay lập tức, làm cách nào để hiển thị số yui-ge của tôi ở trên là áp dụng CSS ở trên (cả trong Chrome và Firefox).

<div class='container'> 
    <div class='default selected'> 
     <h1>Page Title</h1> 
     <div class='yui-ge'> //for some reason, this tag remains hidden cause of the above CSS 
      //more div tags 
     </div> 
    </div> 
    //more HTML here 
</div> 

cập nhật

Look đây: --Liên REMOVED--

Nhấp vào "Woot" tab .... không có kết quả được hiển thị trên tab woot mặc định - họ vẫn ẩn .

Answer 1

Bạn có quy tắc CSS này:

#main .woot > div:not(.sites):not(.default) { 
    display: none; 
} 

Quy tắc này áp dụng cho mọi DIV bên trong phần tử #main, mà không có các lớp sites hoặc default và là con của một yếu tố .woot.

cấu trúc của bạn là:

<div id="main"> 
    <div class="woot"> 
     <div class="woot default selected"> 
      <div class="yui-ge"> ... </div> 
     </div> 
    </div> 
</div> 

Như bạn có thể thấy, .yui-ge DIV không có lớp sites cũng không default và nó nằm bên trong một yếu tố .woot. Do đó, nó sẽ bị ẩn.

---

Vấn đề là bạn có hai DIV trong chuỗi tổ tiên có lớp woot.

Answer 2

Nếu bạn ẩn một phần tử, tất cả các phần tử con của nó cũng bị ẩn.