影響樣式的輸入和標籤元素的HTML順序

我有一個複選框和標籤列表。我使用這個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。但很高興知道發生了什麼。

來源

2017-07-01 Gregory Tippett

我想其他人已經解釋如何相鄰兄弟選擇的作品。如果你想使用它並反轉輸入/標籤的顯示，你可以使用'flex'https://codepen.io/mcoker/pen/YQaxJz。你說你不關心訂單，所以我想知道你是否願意把它當成解決方案。 –

如果你只是想理解''''選擇器，這個問題是重複的https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean –

-1

這與a+b選擇器選擇b直接放置在a之後的事實有關。

因此（當標籤放在輸入之前時）label之後的C input是D label。

來源

2017-07-01 22:51:02 Vivick

-1

+是兄弟選擇器。它專門選擇用於A + B，的順序，即，其選擇時，它如下元件A.

在形式上，這是類似於後代選擇，例如，div p，它選擇一個div內的任何p元件B，和直接後代選擇器，例如div > p，它只有在div的直接子代（而不是孫子）時才選擇p。