html - 没有兄弟的纯 css 切换

Question

将复选框用于 css 切换，此代码有效...单击复选框时 div 消失...

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 中，但实际的复选框必须与“测试”处于同一级别

#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>