我有一個複選框和標籤列表。我使用這個CSS的樣式應用到標籤時checbox檢查:影響樣式的輸入和標籤元素的HTML順序
input[type=checkbox]:checked + .CheckLabels {background-color: green;}
當我爲了我的HTML這樣的:
<input type="checkbox" name="C" id="checkC" value="C" checked>
<label class="CheckLabels" for="checkC">C</label>
<input type="checkbox" name="D" id="checkD" value="D" checked>
<label class="CheckLabels" for="checkD">D</label>
它的工作原理像預期一樣:點擊e標記添加或刪除綠色風格。但是,當我在之前輸入標籤時,單擊該標籤會導致後面的標籤具有應用/刪除的樣式。即:點擊e標記添加或刪除從d標籤的綠色(雖然適當的複選框被選中還是)
<label class="CheckLabels" for="checkC">C</label>
<input type="checkbox" name="C" id="checkC" value="C" checked>
<label class="CheckLabels" for="checkD">D</label>
<input type="checkbox" name="D" id="checkD" value="D" checked>
這究竟是爲什麼?我不特別關注標籤和複選框的順序,因爲我將使用display:none
。但很高興知道發生了什麼。
我想其他人已經解釋如何相鄰兄弟選擇的作品。如果你想使用它並反轉輸入/標籤的顯示,你可以使用'flex'https://codepen.io/mcoker/pen/YQaxJz。你說你不關心訂單,所以我想知道你是否願意把它當成解決方案。 –
如果你只是想理解''''選擇器,這個問題是重複的https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean –