スタイルに影響を与えるInput要素とLabel要素のHTML順

Question

私はチェックボックスとラベルのリストを持っています。 checboxがチェックされているとき、私はラベルにスタイルを適用するには、このCSSを使用しています：

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> 

をそれが意図したとおりに動作します：Cのラベルをクリック緑のスタイルを追加または削除します。しかし、ラベルを入力する前に、のラベルをクリックすると、に続いてラベルのスタイルが適用/削除されます。すなわち：（適切なチェックボックスがまだチェックされているけれども。）Cのラベルをクリックすると、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を使用しているので、特にラベルとチェックボックスの順番には付いていません。しかし、何が起こっているか知っているといいですね。

Answer 1

aの直後にa+bセレクタがbを選択したことに関連しています。

したがって、入力後にlabelというラベルを付けると、の直後には、となります。

Answer 2

+は兄弟セレクタです。それは、具体的には、この順序で、すなわち、それはdiv内部任意pを選択例えば、素子A

形態においては、子孫セレクタと類似だ、div pを、次の要素Bを選択し、A + Bについて選択します直接子孫セレクタ、たとえばdiv > pは、divの直接の子（孫ではない）の場合にのみpを選択します。

+は直接兄弟ですが、便利な一般的な兄弟セレクタもあります。たとえば、p ~ pは、pの前に同じ親でpを選択します。

は、特にこの上MDNの記事をチェックアウトした後、関連セレクタに周り読み：https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors