html - 单选按钮不会显示/隐藏 div

Question

我正在尝试使用 css 通过单选按钮显示和隐藏 div。我的代码有问题吗:<

这是 jsfiddle 链接 http://jsfiddle.net/uaLmjnjc/

CSS

#logo-as-is:checked ~ #upload-image-selected, #select-from-library-selected{
    display:none;   
}

#logo-upload-img:checked ~ #upload-image-selected{
    display:block;
}

#logo-upload-img:checked ~ #select-from-library-selected{
    display:none;
}

#logo-select-library:checked ~ #select-from-library-selected{
    display:block;
}

#logo-select-library:checked ~ #upload-image-selected{
    display:none;
}

#upload-image-selected{
    display:none;
}

#select-from-library-selected{
    display:none;
}

Answer 1

波浪号选择器

The general sibling combinator selector is very similar to the adjacent sibling combinator selector. The difference is that the element being selected doesn't need to immediately succeed the first element, but can appear anywhere after it.

所以他们必须共享同一个父级，他们不能像您所做的那样只是在页面上的任何地方，例如

<div class="col-md-1">
    <input type="radio" class="iradio" name="logoselection" id="logo-as-is" />
    <label for="logo-as-is">Hide div</label>
    <div id="hideme">Hidden when radio checked</div>
</div>

#logo-as-is:checked ~ #hideme {
    display:none;   
}

http://jsfiddle.net/L3t8suuy/

会起作用，而如果您试图隐藏的 div 与单选按钮不共享同一个父项，则它不会起作用

http://jsfiddle.net/L3t8suuy/1/

这给您留下了两个选择来完成您想要完成的事情，重构您的 HTML abit 以便您试图隐藏的所有元素也共享相同的父元素并遵循选择时隐藏它们。或者，不幸的是，求助于使用 javascript。