CSS: cách chọn anh chị em của cha mẹ

Question

Tôi có HTML sau trong trang của mình.

<ul id="detailsList"> 
    <li> 
     <input type="checkbox" id="showCheckbox" /> 
     <label for="showCheckbox">Show Details</label> 
    </li> 
    <li>content ...</li> 
    <li>content ...</li> 
    <li>content ...</li> 
    <li>content ...</li> 
    <li>content ...</li> 
</ul> 

Tôi không thể thay đổi HTML này. Tôi đã ẩn tất cả LI với ngoại lệ đầu tiên bằng cách sử dụng CSS sau đây

ul#detailsList li:nth-child(1n+2) { 
    display:none; 
} 

Cho đến nay rất tốt. Những gì tôi muốn làm bây giờ là để hiển thị những LI ẩn khi hộp kiểm được đánh dấu, sử dụng CSS tinh khiết. nỗ lực hết sức mình cho đến nay là

ul#detailsList li input#showCheckbox:checked + li { 
    display:block; 
} 

Rõ ràng điều này không làm việc, như + li sẽ chỉ chọn ngay sau khi hộp kiểm (ví dụ: anh chị em) LI, chứ không phải anh em ruột của cha mẹ.

Điều này có thể thực hiện được không?

Answer 1

Bạn không thể làm điều đó với CSS nhưng

Bạn có thể thử sử dụng jQuery

$("#showCheckbox").click(function(){ 
    $(this).parent().siblings().show(); 
}); 

Answer 2

Bạn không thể làm điều đó với CSS một mình, bạn cần sử dụng javascript cho việc này. Vì bạn cần nắm bắt sự kiện thay đổi của hộp kiểm.