純CSS切換，沒有兄弟姐妹

Question

使用複選框的CSS切換，此代碼的工作...當你點擊複選框股利消失...

input:checked ~ #test{display:none} 

<div id="main"> 
<input type="checkbox">Click Me 
<div id="test">This is a test</div> 
</div> 

但在這裏，這是行不通的，因爲TEST div不是兄弟姐妹，對嗎？它的主要分區之外...

input:checked ~ #test{display:none} 

<div id="main"> 
<input type="checkbox">Click Me 
</div> 
<div id="test">This is a test</div> 

有沒有辦法讓這個工作只用css？我想如果我刪除〜那麼任何一個ID = TEST的div都會消失，不管它在哪裏，但事實並非如此。

Answer 1

以及這類作品

觸發的是裏面你的主，但實際的複選框必須在同一水平的「測試」

#main {white-space:nowrap;} 
 
#check { 
 
    display:none; 
 
    } 
 
p {display:inline-block;} 
 
.fake{ 
 
    display:inline-block; 
 
    width: 10px; 
 
    height: 10px; 
 
    background:lightgray; 
 
    } 
 
#check[type=checkbox]:checked + #main + #test { 
 
    display:none; 
 
    } 
 
#check[type=checkbox]:checked + #main > label { 
 
    background: gray; 
 
}

<input id="check" type="checkbox"> 
 
<div id="main"> 
 
    <label class="fake" for="check"></label> 
 
    <p>Click Me</p> 
 
</div> 
 
<div id="test">This is a test</div>