css - 使用 CSS : Why this code won´t work? 根据复选框显示/隐藏内容

Question

用户GGG好心地给了我一个如何使用 CSS 显示和隐藏内容的示例(它是 here )。

但是当我尝试将其调整到我的网站时却失败了。这是how I´ve modified it .

问题是每个复选框都有一个 css id，每个复选框在选中时都应该显示不同的内容。显示/隐藏的内容有一个 css 类，并且它不与复选框相邻 ( example )。

我该如何调整该代码？到目前为止，我尝试过的方法没有奏效......

非常感谢您的见解!谢谢!!

罗莎蒙达

Answer 1

DEMO更新为使用通用兄弟选择器而不是相邻兄弟选择器

    /*styled relative to the label*/
    label {display:block;}
    label ~ input[type="checkbox"] ~ div {display:none; margin-left:1em;}
    label ~ input[type="checkbox"]:checked ~ div {display:inline;}​

    <label>Box 1:</label>
    <input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-131" type="checkbox">
    <div class="tipo-uf-131">Box 1 is checked.</div>
    <br>
    
    <label>Box 2:</label>
    <input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-134" type="checkbox">
    <div class="tipo-uf-134">Box 2 is checked.</div>
    <br>
    
    <label>Box 3:</label>
    <input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-130" type="checkbox">
    <div class="tipo-uf-130">Box 3 is checked.</div>​