没有同级的纯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> 

但在这里，它不起作用，因为测试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中，但实际的复选框必须与"test“处于同一级别。

​

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

​