多<input>功能

我有这样的代码：http://jsfiddle.net/eYgdm/345/多<input>功能

<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）

来源

2014-11-23 Emoyaki

这是有点滥用CSS。理想情况下，这种功能应该使用JavaScript来完成，因为即使对文档结构稍作修改也会使CSS选择器无效并导致此“功能”被破坏。 – Dai 2014-11-23 11:39:10

@戴我不同意。使用兄弟选择器和伪类是避免JS对诸如此类非常简单的功能的需求的绝佳方法。另外，JS的效率更高，JS需要更多的行和字节（绑定点击/更改事件处理程序，切换类或更改内联样式）。 – Terry 2014-11-23 11:39:56

这是因为+是一个直接的兄弟选择器。 .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/

来源

2014-11-23 11:39:12 Terry

非常感谢。这可能超过2个元素？（你使用什么然后〜，+或什么？）再次谢谢 – Emoyaki 2014-11-23 11:46:18

'~'是一个* general * sibling元素，即它将适用于所有同级下游（无限制），无论它们与选定元素的距离如何。 “+”表示直接兄弟，即所选元素之后的兄弟元素（因此只有一个将被选中）。 – Terry 2014-11-23 12:30:17

再次感谢你。 – Emoyaki 2014-11-23 12:47:27

回答

相关问题