Question

使用css切换的复选框，此代码有效...单击复选框后div消失...

total()

但是在这里，它不起作用，因为TEST div不是兄弟，对吧？它超出了主要的分区......

input:checked ~ #test{display:none}

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

有没有办法让这个工作只用css？我想如果我删除〜那么ID = TEST的任何div都会消失，无论它在哪里，但事实并非如此。

Answer 1

这种作品

触发器位于您的主要内部，但实际的复选框必须与＆＃34; test＆＃34;

处于同一级别

＆＃13;

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

＆＃13;

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

＆＃13;

纯css切换没有兄弟

1 个答案: