如何將CSS屬性選擇器與相鄰選擇器一起使用？

Question

對於以下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/

Answer 1

同一id不能用於多個元素。 您可以使用myonoff1和myonoff2 。

然后您可以像這樣使用CSS訪問它

#myonoff1
{
    ...
}

#myonoff2
{
    ...
}

在jQuery中，您可以使用以下代碼：

$('#myonoff1').show(); // or any other method.

另外，您可以使用元素共享的類來堅持使用模式，而不是使用div[class*="onoff"] { 。 例如，在HTML中，您使用class="onoff-checkbox" ；在CSS中，您使用.onoff-checkbox { ... }

Answer 2

在此示例中，我認為您對必須唯一的內容感到困惑。

（如果我錯了，請糾正我），但是我認為該元素的ID應該與該元素的name相同，並且它們是input元素的唯一標識符。 標簽的for屬性應准確反映這些內容。 無論如何，元素不能共享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> 

CSS中要重點關注的是這一行：

input.onoff-checkbox:checked + label.onoff-label span.onoff-switch {
    right: 5px;
}

這.onoff-checkbox類的元素為目標，然后根據該元素的值應用樣式。

您可以在工作正常的JSFiddle中看到這一點 。