css - 嵌套在 DIV 中时，单击事件的 CSS CheckBox Hack 不起作用

Question

如何在 DIV 中添加复选框和标签 css 单击事件？以下代码对我不起作用，如果我删除“”它的工作完美。为什么会发生？

---

HTML

<div id="wrapper">
       <input name="" type="checkbox" value="" id="hub" class="hub"  style="display:none;"/>
       <label for="hub"  class="hub2"></label>
    </div>

    <div class="slide"> 
       the contents
    </div>

---

CSS

.slide{
    background:red; 
}


input[type=checkbox].hub:checked ~ .slide {
    background:green !important;    
}

Answer 1

您必须将.slide元素与label和一起放置input[type=checkbox]，如下所示

<div id="wrapper">
   <input name="" type="checkbox" value="" id="hub" class="hub"  style="display:none;"/>
   <label for="hub"  class="hub2">open</label>
   <div class="slide"> 
      the contents
   </div>
</div>

Demo

More on sibling selector