Question

我有这段代码：http://jsfiddle.net/eYgdm/345/

<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div class="test1"></div>
<div class="test2"></div>

CSS：

.test1 {
    width: 100%;
    height: 100%;
    background: #5CB85C;
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
}
.test2 {
    position:absolute;
    background: #FFFFFF;
    top:100px;
    z-index:2;
    width:100px;
    height:100px;
}
label.btn {
    position: absolute;
    top:10px;
    left: 10px;
    z-index:2;
    user-select: none;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + test1 {
    background: #5BC0DE;
}
input[type="checkbox"]:checked + test2 {
    background: #000000;
}
label + input[type="checkbox"]:checked {
    background: #000;
}

我想在选中按钮时更改test1和test2背景。但它过去只用于一个（例如，如果只有test1而不是测试2）

Answer 1

这是因为+是一个直接的兄弟选择器。 .test2不是复选框的直接兄弟，它是一般的兄弟姐妹。因此，请尝试使用~。此外，您忘记了类的.前缀 - 您的代码正在定位元素 <test1>和<test2>，而不是类test1或test2。

input[type="checkbox"]:checked + .test1{
    background: #5BC0DE;
}
input[type="checkbox"]:checked ~ .test2{
    background: #000000;
}

修正了你的小提琴：http://jsfiddle.net/teddyrised/eYgdm/346/

事实上，为了在将来您可以在复选框和.test1或.test2之间添加其他元素的设置进行验证，我建议您使用通用兄弟选择器;）

p / s：您可以在这篇优秀的文章中阅读有关兄弟姐妹选择器的更多信息：http://css-tricks.com/child-and-sibling-selectors/

多个<input />功能

1 个答案: