使用 css 选中的选择器更改 div 颜色

Question

当我尝试使用输入标签更改 div 的颜色时遇到一些问题。如果 div 位于输入的同一部分，它就完美无缺。但是，如果我尝试将 div 放在页脚中，例如，停止工作。

HTML：

 <section>
    <input id="select1" name="test" type="radio" checked />
        <label for="select1">Red</label>
    <input id="select2" name="test" type="radio" />
        <label for="select2">Green</label>
    <input id="select3" name="test" type="radio" />
        <label for="select3">Blue</label>
</section>
<footer>
    <div class="colorDiv"></div>
</footer>

CSS：

.colorDiv{
    width:50px;
    height:50px;
    background-color:red;
}

#select2:checked ~ .colorDiv{
    background-color:green;
}

#select3:checked ~ .colorDiv{
    background-color:blue;
}

这是一个例子：http : //jsfiddle.net/cqscc48g

有什么方法可以实现吗？

谢谢

Answer 1

CSS 是一个级联渲染器。所以它遵循DOM元素的结构。因此，您只能关联属于后代的元素，或者至少可以关联同级元素。

您有两个选择：

1 - 调整您的 HTML：
您甚至不需要将 div 放在输入部分中。但至少，你必须让输入离开section, 来制作一个“侄子”选择器。（当然这个面额不存在;））

JsFiddle - 更改 HTML

<input id="select1" name="test" type="radio" checked />
    <label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
    <label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
    <label for="select3">Blue</label>

<footer>
    <div class="colorDiv"></div>
</footer>

然后你可以选择：

#select2:checked ~ footer .colorDiv{
    background-color:green;
}

#select3:checked ~ footer .colorDiv{
    background-color:blue;
}

2 - 使用 Javascript 方法：

如果您非常喜欢您的 HTML 结构，那么您必须使用 Javascript。你可以让它更清晰，但只是一个例子：

JsFiddle - 使用 Javascript

function ChangeColor(color) {
    var clrDiv = document.getElementsByClassName("colorDiv")[0];
    clrDiv.style.backgroundColor = color;
}

document.getElementById("select1").onclick = function() { ChangeColor(""); }
document.getElementById("select2").onclick = function() { ChangeColor("green"); }
document.getElementById("select3").onclick = function() { ChangeColor("blue"); }