对于以下CSS，我如何共同使用属性和相邻选择器？
.onoff-checkbox:checked + .onoff-label .onoff-inner {margin-left: 0;}
.onoff-checkbox:checked + .onoff-label .onoff-switch {right: 0px;}
我使用它来创建CSS切换样式复选框，并希望在页面上有多个复选框？使用以下HTML代码（示例）：
<input type="checkbox" name="onoff" class="onoff-checkbox-1" id="myonoff" checked>
...
<input type="checkbox" name="onoff" class="onoff-checkbox-2" id="myonoff" checked>
我尝试了以下内容 -
input[class*="onoff-checkbox"]:checked + label[class*="onoff-label"] span[class*="onoff-inner"]
...
正确的语法是什么。谢谢你的帮助。
以下是试用的代码 - https://jsfiddle.net/vedanta_/8z3sqatf/ 原始代码改编自 - https://proto.io/freebies/onoff/
答案 0 :(得分：1)
您不能对多个元素使用相同的id。您可以使用 myonoff1 和 myonoff2 。
然后你可以像这样使用CSS访问它
#myonoff1
{
...
}
#myonoff2
{
...
}
在jQuery中，你可以使用它：
$('#myonoff1').show(); // or any other method.
此外，您可以使用元素共享的类来坚持模式，而不是使用div[class*="onoff"] {。例如，在您的HTML中，您使用class="onoff-checkbox"，而在CSS中则使用.onoff-checkbox { ... }
答案 1 :(得分：1)
在这个例子中，我认为你对于必须具有什么特征感到困惑。
（如果我错了，有人会纠正我），但我相信元素的 id 应该与元素的名称<相同/ strong>，这些是输入元素的唯一标识符。标签的 属性应完全反映这些内容。无论如何，元素不能共享 id ，也不能共享 for 属性。
这些课程绝对可以在输入元素之间共享 - 它们不必是唯一的。所以，为了解决这个问题，我已经修改了你的标记。
div[class*="onoff"] {
position: relative;
width: 90px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
input[class*="onoff-checkbox"] {
display: none;
}
label[class*="onoff-label"] {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
span[class*="onoff-inner"] {
display: block;
width: 200%;
margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s;
-webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
span[class*="onoff-inner"]:before, span[class*="onoff-inner"]:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
span[class*="onoff-inner"]:before {
content:"Yes";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}
span[class*="onoff-inner"]:after {
content:"No";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
span[class*="onoff-switch"] {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
border: 2px solid #999999;
border-radius: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
-moz-transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
input[class*="onoff-checkbox"]:checked {
margin-left: 0;
}
label[class*="onoff-label"] {
margin-left: 0;
}
span[class*="onoff-inner"] {
margin-left: 0;
}
input[class*="onoff-checkbox"]:checked {
right: 0px;
}
label[class*="onoff-label"] {
right: 0;
}
span[class*="onoff-inner"] {
right: 0;
}
input.onoff-checkbox:checked + label.onoff-label span.onoff-switch {
right: 5px;
}<div class="onoff">
<input type="checkbox" name="onoff" class="onoff-checkbox" id="onoff" checked="true" />
<label class="onoff-label" for="onoff">
<span class="onoff-inner"></span>
<span class="onoff-switch"></span>
</label>
</div>
<br/>
<div class="onoff2">
<input type="checkbox" name="onoff2" class="onoff-checkbox" id="onoff2" checked="true" />
<label class="onoff-label" for="onoff2">
<span class="onoff-inner2"></span>
<span class="onoff-switch"></span>
</label>
</div>
要关注的主要内容是这一行：
input.onoff-checkbox:checked + label.onoff-label span.onoff-switch {
right: 5px;
}
这会定位类为.onoff-checkbox的元素，然后根据其值应用样式。
您可以在 working JSFiddle 中看到这一点。